Question

在谷歌浏览器中，一切正常。当我在mozilla中打开应用程序时，React Date Picker返回invalid date

我尝试使用moment(this.state.startDate).toDate()

new Date(this.state.startDate)，但无效

class Example extends React.Component {
  state = {
    startDate: new Date()
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {

    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

Answer 1

尝试添加dateFormat属性，例如：

      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        dateFormat="d MMM yyyy"
      />

Answer 2

您可以尝试这种方法，此代码可以在我的Mozilla，chrome和edge项目中完美运行。我的日期选择器版本为"react-datepicker": "^2.7.0",，反应版本为"react": "^16.8.6",

filters:{
                    startDate: new Date(),
                    endDate: new Date(),
                    type: props.location.state === undefined ? 0 : props.location.state.reportType,
                    reportName : 'Not Selected',
                    reportPreviewCount: 0,
                    reportedUserId: -1,
                    userType: '0',
                },    


    handleChangeDate(date, dateType) {
            let oldState = this.state.filters;

            if(dateType === 'startDate'){
                oldState['startDate'] = date;
                oldState['reportPreviewCount'] = 0;

            }else{
                oldState['endDate'] = date;
                oldState['reportPreviewCount'] = 0;
            }
            this.setState({titleDatatable: [], dataSetDataable: [], filters: oldState, flashState: true});
        }     


                          <DatePicker
                                selected= {props.filters.startDate}
                                onChange={(date) => props.handleChangeDate(date, 'startDate')}
                                className="form-control"
                                peekNextMonth
                                showMonthDropdown
                                showYearDropdown
                                dropdownMode="select"
                                onChangeRaw={(e) => e.preventDefault()}
                                withPortal
                            />

Answer 3

您可以将react-single-calendar用作日期选择器，它非常易于使用且易于修改

npm i react-single-calendar

这是链接https://www.npmjs.com/package/react-single-calendar

反应日期选择器返回无效日期

3 个答案: