如何获取Material-UI日期选取器值

我正在使用material-ui datepicker。我想要做的是获得用户选择的值，并将其设置为状态，但是我正在努力解决这个问题，所以任何帮助将不胜感激。如何获取Material-UI日期选取器值

所以这里就是我此刻做：

我的日期选择器组件看起来是这样的：

<DatePicker 
    hintText="Select the date" 
    formatDate={(date) => moment(date).format('DD-MM-YYYY')} 
    onChange={this.handleChange1.bind(this)} />

的handleChange1功能：

handleChange1(e, date){ 
this.setState({ 
    appointmentDate: date.value 
}) 
console.log(e, date); 
console.log(this.state.appointmentDate; 
}

构造函数：

constructor(props){ 
super(props); 
    this.state = { 
    appointmentDate: '', 
    appointmentTime: '' 
};

上述所有的给我在控制台下面....

null Fri Oct 20 2017 16:50:33 GMT+0100 (BST)

和

_blank log_

然而，在文本框一旦用户选择，我可以看到日期被正确地呈现日期像20-10-2017

显示给用户的日期是我想存储的状态。有人可以解释如何实现这一目标吗？

谢谢

来源

2017-10-20 Jay240692

您需要将日期选取器转换为受控输入。 Date-Picker可以绑定的对象是Date对象。所以你的初始状态应该看起来像

this.state={appointmentDate:null}

然后你可以绑定你的日期和下面的控件。

<DatePicker 
     hintText="Select the date" 
     formatDate={(date) => moment(date).format('DD-MM-YYYY')} 
     onChange={this.handleChange1.bind(this)} 
     value={this.state.appointmentDate}/>

与handlechange功能是

handleChange1(e, date){ 
    this.setState({ 
     appointmentDate: date 
    }); 
}

如果你想存储日期为你的国家一个单独的条目的格式化字符串，你可以这样做使用handleChange1功能

handleChange1(e, date){ 
     this.setState({ 
      appointmentDate: date, 
      appointmentDateString: moment(date).format('DD-MM-YYYY') 
     }); 
    }

来源

2017-10-20 16:16:36 palsrealm

当您收到此信息“Fri Oct 20 2017 16:50:33 GMT + 0100（BST）”时，您会收到刚刚缺少格式的日期 “ 做这样的事情

 var date = new Date("Fri Oct 20 2017 16:50:33 GMT+0100 (BST)") 
     var finaldate = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear()

末，你将有finaldate = “20-10-2017”

希望这会有所帮助。

谢谢

来源

2017-10-20 16:51:50

如何获取Material-UI日期选取器值

回答

相关问题