Question

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

所以这就是我现在正在做的事情：

我的datepicker组件如下所示：

<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

向用户显示的日期是我要存储到州的状态。有人能解释一下如何实现这一目标吗？

由于

Answer 1

您将获得缺少格式的日期当你有这个信息＆＃34; Fri Oct 20 2017 16:50:33 GMT + 0100（BST）＆＃34; 做这样的事

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

最后你将获得最终日期=＆＃34; 20-10-2017＆＃34;

希望这会有所帮助。

谢谢

Answer 2

您需要将Date-Picker转换为受控输入。 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')
        });
    }

如何获取Material-UI Date Picker值

2 个答案: