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

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

0 голосов
/ 27 ноября 2018

Я использую React-Datepicker и MomentJS.Но когда я хочу использовать Moment для установки startDate, значение дает недопустимую дату в поле datepicker.

Когда я регистрирую this.state.startDate в консоли, консоль показывает мне следующее: "startdate:27-11-2018 », формат« ДД-ММ-ГГГГ ».Этот формат также используется для компонента DatePicker.

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

Может кто-нибудь объяснить мне, почему в браузере отображается недопустимая дата?

Мои зависимости: 

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

Ответы [ 3 ]

0 голосов
/ 23 января 2019

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

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



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

0 голосов
/ 17 апреля 2019

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

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

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

0 голосов
/ 11 декабря 2018

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

...