React-Datepicker MomentJS无效日期 [英] React-Datepicker MomentJS Invalid Date

问题描述

我正在使用React-Datepicker和MomentJS.但是，当我要使用Moment设置startDate时，该值会在datepickerfield中给出无效的日期.

I'm using React-Datepicker and MomentJS. But when I want to use Moment for setting a startDate, the value gives Invalid date in the datepickerfield.

当我在控制台中记录this.state.startDate时，控制台向我显示以下内容: 开始日期:27-11-2018"，其格式为"DD-MM-YYYY".此格式也用于DatePicker组件.

When I log the this.state.startDate in the console, the console shows me the following: "startdate: 27-11-2018", this has the format 'DD-MM-YYYY'. This format is also used for the DatePicker component.

import * as React from "react";
import * as ReactDOM from "react-dom";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import * as moment from "moment";
import "moment/locale/nl";

export class DateContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment().format('DD-MM-YYYY'),
    };
  }
  render() {
    console.log('startdate:',this.state.startDate);
    return (
        <div className="date-Filter">
          <div className="date-Filter-Title">Release Date</div>
          <DatePicker
            onChange={this.handleStartDate}
            selected={this.state.startDate}
            dateFormat="DD-MM-YYYY"
            isClearable={true}
            placeholderText="Select a date other than today or yesterday"
            fixedHeight={true}
            tetherConstraints={ [] }
            locale="nl"
            popperPlacement="right-start"
            popperModifiers={{
             flip: {
               enabled: false
             },
             preventOverflow: {
               enabled: true,
               escapeWithReference: false
             }
           }}
           selectsStart
           startDate={this.state.startDate}
           className="startDate"
           showMonthDropdown
           showYearDropdown
          />
        </div>
    );
  }
}

有人可以向我解释为什么它在浏览器中显示无效日期.

Can someone explain to me why it is showing invalid date in browser.

我的依存关系:

  "dependencies": {
    "moment": "^2.22.2",
    "react": "^16.6.0",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.6.0",
    "sass-loader": "^7.1.0",
    "searchkit": "^2.3.1-alpha.4"
  },

推荐答案

使用startDate: moment().toDate(). .format('DD-MM-YYYY')返回一个字符串，而DatePicker react组件的选定属性需要一个Date对象.

Use startDate: moment().toDate(). .format('DD-MM-YYYY') returns a string, while the selected prop of the DatePicker react component requires a Date object.

这篇关于React-Datepicker MomentJS无效日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！