如何使用MomentJS将自定义日期设置为react-datepicker的DatePicker? [英] How to set custom date to DatePicker of react-datepicker using MomentJS?

问题描述

我已将日期存储在数据库中.我可以成功获取日期.但是，当要为 react-datepicker 的DatePicker设置任何特定日期时，我无法没有设定那个日期.

I have stored dates in database. I can fetch dates successfully. But when it comes to set any particular date to DatePicker of react-datepicker, I couldn't set that date.

这是我用于获取日期并使用date的值设置状态的代码.

Here is code that I have used for fetching dates and setting state with the value of date.

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);
        });
}

UpdateAllDates()函数用于使用 MomentJs

UpdateAllDates() function for converting dates using 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并尝试设置selected参数.这是代码:

After getting dates, now I try to set date to datepicker and try to set selected parameter. Here is code:

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

When I runs code I get error - TypeError: Cannot read property 'event_date' of undefined:

我在哪里犯错?还有其他方法可以使用默认/自定义日期将日期设置为DateTimePicker吗?

Where am I making mistake? Is there any other way of setting a date to DateTimePicker with default/custom date?

推荐答案

updateAllDates仅在成功调用API之后才被调用.因此，到页面呈现您的this.state.eventList[0]的时间将是未定义的.

updateAllDates will be called only after the successfull API call. So by the time the page renders your this.state.eventList[0] will be undefined.

所以请检查以下内容

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

这篇关于如何使用MomentJS将自定义日期设置为react-datepicker的DatePicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！