如何使用MomentJS将自定义日期设置为react DatePicker的DatePicker？

Question

我在数据库中存储了日期。我可以成功地获取日期。但是当涉及到将任何特定的日期设置为Report-datepicker的DatePicker时，我无法设置该日期。

下面是我用来获取日期和设置带有日期值的状态的代码。

loadAllEvents() {
    axios({
        method: 'POST',
        url: '/api/Account/SelectAllDatesFromDb',
        contentType: 'application/json',
        data: {},
    }).then(function (response) {
        if(response!=null){     
            this.setState({
                eventList: response.data
            });
            this.updateAllDates();
        }
        else {
            this.setState({
                eventList: []
            });
        }

    }.bind(this))
        .catch(function (error) {
            console.log(error);
        });
}

函数，用于使用MomentJs转换日期

updateAllDates() {
        for (var i = 0; i < this.state.eventList.length; i++) {
            var items = this.state.eventList;
            items[i].event_date = moment(this.state.eventList[i].event_date).format("DD/MM/YYYY");
            this.setState({ eventList: items });    
        }
    }

在获得日期之后，现在我尝试将日期设置为datepicker，并尝试设置所选的参数。以下是代码：

<InputGroup>
  <DatePicker
    className="form-control"
    dateFormat="dd/MM/yyyy"
    maxDate={new Date()}
    isClearable={true}
    selected={this.state.eventList[0].event_date}
    onChange={this.handleChange}
    disabled={this.state.eventDateBox}
    showYearDropdown
    showMonthDropdown
  />

我哪里出错了？有没有其他方法设置日期到DateTimePicker与默认/自定义日期？

Answer 1

updateAllDates只有在成功调用API之后才会调用。因此，当页面呈现您的时this.state.eventList[0]将是未定义的。

因此，请进行如下检查

{ this.state.eventList[0] &&
<InputGroup>
  <DatePicker
    className="form-control"
    dateFormat="dd/MM/yyyy"
    maxDate={new Date()}
    isClearable={true}
    selected={this.state.eventList[0].event_date}
    onChange={this.handleChange}
    disabled={this.state.eventDateBox}
    showYearDropdown
    showMonthDropdown
  />
}