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

【问题标题】：How to get Material-UI Date Picker value如何获取 Material-UI 日期选择器值
【发布时间】：2025-11-21 10:45:02
【问题描述】：

我正在使用 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

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

谢谢

【问题讨论】：

标签： javascript reactjs datepicker react-redux material-ui

【解决方案1】：

您得到的日期只是缺少格式当您获得此信息“2017 年 10 月 20 日星期五 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"

希望这会有所帮助。

谢谢

【讨论】：

【解决方案2】：

您需要将日期选择器转换为受控输入。 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')
        });
    }

【讨论】：