Question

目前我正在使用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}
/>

Answer 1

Yoy可以做这样的事情

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}
/>

Answer 2

DatePickers的默认行为是在今天的日期开始。唯一的原因不是这种情况，如果您传入defaultDate prop或具有不同日期的值prop。

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

inputs.dateValue = new Date();

Answer 3

如果像我一样使用Redux-Form，则可以通过这种方式设置默认值

在容器中设置initialValues：

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

对于组件中的字段：

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

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

3 个答案: