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

IT技术 reactjs momentjs react-datepicker
2021-05-16 04:10:37

我在数据库中存储了日期。我可以成功获取日期。但是当谈到将任何特定日期设置为react-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() 函数

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 并尝试设置selected参数。这是代码:

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

当我运行代码时出现错误 - TypeError: Cannot read property 'event_date' of undefined在此处输入图片说明

我哪里出错了?有没有其他方法可以使用默认/自定义日期将日期设置为 DateTimePicker?

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