React-Datepicker MomentJS Invalid Date

和自甴很熟 提交于 2020-02-20 08:33:19

问题


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.

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.

My Dependencies:

  "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"
  },

回答1:


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




回答2:


From Hacker0x01 - "Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using native Date objects to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples."

https://github.com/Hacker0x01/react-datepicker

I am having a similar problem. I am going to try and turn the native Date into a moment after react-datepicker has done it's thing.




回答3:


@Elvira, i met the same challenge when using react-datepicker@2.0.0. It is critical to follow any 3rd party packages that you make use of. The issue of modules as popularized by ES6 deemed moment.js an extra baggage in react-datepicker since moment.js is an all-in-one package i.e. import moment from 'moment';

The concept of modules enables us to make objects, functions, classes or variables available to the outside world by simply exporting them and then importing them where needed in other files.

Starting with react-datepicker@2.0.0, moment.js was removed as a dependency and the team started using the native javascript Date object paired with date-fns for all date functionality within the datepicker. Inspect propTypes of the react-datepicker calendar component, and you will notice that all dates are declared to be PropTypes.instanceOf(Date).

Solution: Stick to using the native JavaScript Date object. After a user selects a date from your calendar (read: react-datepicker), you can always convert that date object using moment.js to whatever format.

export class DateContainer extends React.Component {
  constructor(props) {
    super(props);
    // Used 'started' to avoid name conflicts, and return date object
    this.state = { started: new Date(), };
  }
  render() {
    const { started } = this.state
    return (
      // other jsx...
      <DatePicker
        // other props...
        selected={started}
        startDate={started}
      />
    );
  }
}

Below is how i went about dealing with this situation: Environment: react@16.9.0, react-redux@7.1.1, react-datepicker@2.0.0, yup@0.27.0 and Formik@1.5.8 (handling forms in react, made easy).

// stateless component
const InputForm = ({
  // other destructered props...
  dispatch = f => f
}) => {
  const values = {
    // initial state
  }

  return (
    <Formik
      // other props...
      onSubmit={
        async (values) => {
          // Here is my solution...
          // convert date object from react-datepicker using moment.js,
          // before i dispatch my state object.
          const userData = {
            ...values,
            start_date: moment(values.start_date).format('YYYY-MM-DD')
          }
          await dispatch(someAction(userData));
          // ...
        }
      }
    />
  )
};

export default connect()(InputForm);



回答4:


Instead of using moment in this.state use it in the setState.. that worked for me

constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
   }



handleDateChange = date => {
    this.setState({
      startDate: moment(date).format('DD-MM-YYYY')
    });
  };



来源:https://stackoverflow.com/questions/53501134/react-datepicker-momentjs-invalid-date

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!