Блог

Я использую <DatePicker/> из Material-UI ( http://www.material-ui.com/#/components/date-picker ) и пытаюсь установить свойство defaultDate на текущую дату на моем компьютере, но оно ничего не отображает.

Это ошибка или я что-то упустил?

Вот этот код:

   constructor(props) {
    super(props)

    //Followed the example from the link provided: So hoping to display today's date on my computer, which is 2016-09-29

    const dateToday = new Date();
    dateToday.setFullYear(dateToday.getFullYear())
    dateToday.setHours(0, 0, 0, 0)

    this.state = {
      controlledDate: null,
      dateToday: dateToday,
    }
  }

  handleDateChange = (event, date) => {
    this.setState({
      controlledDate: date,
    });
  };

render() {
return (
  <DatePicker
      autoOk={true}
      defaultDate={this.state.dateToday}
      hintStyle={styles.hintLabel}
      value={this.state.controlledDate}
      onChange={this.handleDateChange}
    />
 )
}
  

Просматриваем документацию по свойствам MUI DatePicker и читаем описание defaultDate prop, в котором говорится:

Это начальное значение даты компонента. Если указано либо value или valueLink , они переопределят этот реквизит с value приоритетом.

Анализируя код вашего компонента, вы устанавливаете реквизит value , передавая ему this.state.controlledDate , который изначально null , таким образом, имеет приоритет над dafaultDate реквизитом, который вы пытаетесь установить.

 constructor(props) {
  super(props);

  const dateYesterday = new Date();
  dateYesterday.setDate(dateYesterday.getDate() - 1);

  this.state = {
    controlledDate: null,
    dateYesterday: dateYesterday
  };
};

handleDateChange = (event, date) => {
  this.setState({
    controlledDate: date,
  });
};

render () {
  return (
    <DatePicker
      autoOk={true}
      defaultDate={this.state.dateYesterday}
      // value={this.state.controlledDate}
      onChange={this.handleDateChange}
    />
  );
}
  

В этом примере я пытаюсь установить начальную дату на вчерашнюю дату, но я прокомментировал value prop, чтобы заставить его работать, потому что в противном value случае prop будет иметь приоритет над defaultDate prop, который я устанавливаю здесь со вчерашней датой, и поэтому он не будет работать. Я предполагаю, что вам действительно не нужно устанавливать value prop здесь.