ReactJS + Material-UI：如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值？

Posted 2023-02-22

【中文标题】ReactJS + Material-UI：如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值？

【英文标题】：ReactJS + Material-UI: How to set current date as default value using Material-UI's <DatePicker>?

【发布时间】：2017-04-21 15:36:35

【问题描述】：

目前我正在使用 ReactJS + Material-UI 的 <DatePicker> (http://www.material-ui.com/#/components/date-picker)，并希望将今天的当前日期设置为 <DatePicker> 的默认/初始值。我该怎么做呢？

当前设置：

<DatePicker
  autoOk=true
  hintText="Select Date"
  value=inputs.dateValue
  onChange=this.handleDatechange
/>

【参考方案1】：

你可以做这样的事情

this.state=
    date : new Date()


handleDatechange(event,date)
    this.setState(date: date)


<DatePicker
  autoOk=true
  hintText="Select Date"
  value=this.state.date
  onChange=this.handleDatechange
/>

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。

【参考方案2】：

DatePickers 默认行为是从今天的日期开始。不会出现这种情况的唯一原因是，如果您传入 defaultDate 道具或具有不同日期的 value 道具。

在您的情况下，您将值作为 input.dateValue 传递，因此这将是初始值。您只需要确保inputs.dateValue的值设置为今天的日期，例如，

inputs.dateValue = new Date();

【参考方案3】：

如果使用Redux-Form，和我一样，可以这样设置默认

在容器中设置初始值：

export default reduxForm(
    form: 'DateForm', 
    initialValues:  use_end_date: new Date() 
)(DateFormComponent);

对于组件中的字段：

<Field
  name="use_end_date"
  component=ReduxMaterialDatePicker
  margin="none"
/>