React-Datepicker MomentJS Неверная дата

Используйте startDate: moment().toDate().

.format('DD-MM-YYYY') возвращает нить, в то время как для выбранной опоры компонента реакции DatePicker требуется объект Дата.

Вместо использования момента в this.state используйте его в setState .. это сработало для меня

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



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

Из Hacker0x01 - «До версии 1.8.0 в этом пакете использовался Moment.js. Начиная с версии 2.0.0, мы перешли на использование собственных объектов Date, чтобы уменьшить размер пакета. Если вы переключаетесь с 1.8.0 на 2.0 .0 или выше, пожалуйста, просмотрите обновленный пример выше или посетите сайт примеров, чтобы увидеть самые свежие примеры ".

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

У меня похожая проблема. Я собираюсь попробовать превратить родную Date в момент после того, как response-datepicker сделал это.

@Elvira, я столкнулся с той же проблемой при использовании [email protected]. Очень важно следить за любыми сторонними пакетами, которые вы используете. Проблема модулей, популяризированный ES6, считал moment.js дополнительным багажом в react-datepicker, поскольку moment.js - это универсальный пакет, то есть 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.

Начиная с [email protected], moment.js был удален как зависимость и команда начали использовать собственный объект Date javascript в сочетании с date-fns для всех функций даты в datepicker. Осмотрите propTypes в response-datepicker компонент календаря, и вы заметите, что все даты объявлены как 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: [email protected], [email protected], [email protected], [email protected] and [email protected] (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);