如何从Material Ui中获取日期选取器的值

How to get value of Date Picker from Material Ui

本文关键字：选取 取日期 获取 Material Ui      更新时间：2023-09-26

如果我用Material Ui创建了一个日期选择器，我如何获得用户的输入值？

假设用户选择2016年1月1日->我如何获取该值并将其存储为数据类型为日期的变量？

到目前为止，我尝试使用状态来传递一个JSON对象，但这似乎不起作用。例如：

getInitialState: function() {
    return {
      startDate: null,
      endDate:null    
    };
  },
render: function() {
return (
      <div>
          <DatePicker hintText="Start Date" value={this.state.startDate}  onChange={this._handleStartInput} />
          <DatePicker hintText="End Date" value={this.state.endDate} onChange={this._handleEndInput} />
      </div>
);},
_handleStartInput: function(value) {
    this.setState({
      startDate: value
    });
  },
  _handleEndInput: function(value) {
    this.setState({
      endDate: value
    });
  },

然后我可以创建另一个函数来提取值，但现在在我选择日期后，状态永远不会改变，并显示在UI中。

我试过了，并绘制了控制台值

<DatePicker  container="inline" floatingLabelText="Fecha desde" onChange={(x, event) => this.setFechaDesde(x,event)}    defaultDate={new Date()} />

和

setFechaDesde(x,event){
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(x));
    }

您使用的是哪个版本的Material UI？

通过阅读文档，您可以看到

onChange日期值更改时触发的回调函数。由于没有与更改相关联的特定事件，第一个参数将始终为null，第二个参数将为新的Date实例。

您应该尝试在回调中添加第二个参数。

onChange处理程序函数应该采用两个参数：event和date，其中event始终为null，date是新的日期对象。

_handleStartInput: function(event, date) {
    var currentState = this.state;
    currentState.startDate = date;
    this.setState(currentState);
},
_handleEndInput: function(event, date) {
    var currentState = this.state;
    currentState.endDate = date;
    this.setState(currentState);
}
相关文章：