web-dev-qa-db-ja.com

React-Datepicker MomentJS無効な日付

React-DatepickerとMomentJSを使用しています。しかし、startDateを設定するためにMomentを使用したい場合、値によってdatepickerフィールドに無効な日付が与えられます。

This.state.startDateをコンソールに記録すると、コンソールに「startdate：27-11-2018」と表示され、これは「DD-MM-YYYY」という形式になります。この形式は、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"
  },
reactjsdatepickermomentjs
6
Elvira

Hacker0x01から-「バージョン1.8.0までは、このパッケージはMoment.jsを使用していました。v2.0.0以降、パッケージのサイズを縮小するためにネイティブのDateオブジェクトの使用に切り替えました。1.8.0から2.0に切り替える場合.0以上。最新の例については、上記の更新された例のサンプルサイトをご覧ください。」

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

同様の問題が発生しています。 react-datepickerが実行した後、ネイティブのDateを一瞬にしてみます。

2
Lance Crowder

@Elvira、_[email protected]_を使用するときに同じ問題に遭遇しました。使用するサードパーティのパッケージに従うことが重要です。 モジュールの問題 _moment.js_はオールインワンパッケージ、つまり_moment.js_であるため、reduce-datepickerに追加の手荷物として_import moment from 'moment';_と見なされ、ES6によって普及しました

モジュールの概念を使用すると、オブジェクト、関数、クラス、または変数をエクスポートし、他のファイルの必要な場所にインポートするだけで、外部から利用できるようになります。

_[email protected]_で始まる moment.jsは依存関係として削除されました とチームは、datepicker内のすべての日付機能に対して、date-fnsとペアになったネイティブjavascript Dateオブジェクトの使用を開始しました。 react-datepicker カレンダーコンポーネント のpropTypesを調べると、すべての日付がPropTypes.instanceOf(Date)として宣言されていることがわかります。

解決策：ネイティブJavaScript Dateオブジェクトの使用に固執します。ユーザーがカレンダーから日付を選択した後（read：react-datepicker）、いつでも_moment.js_を使用してその日付オブジェクトを任意の形式に変換できます。

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

_

以下は私がこの状況にどう対処したかです：環境：[email protected]、[email protected]、[email protected] .0、yup @ 0.27.0および[email protected]（reactでのフォームの処理、簡単にできます）。

_// 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);
_
0
MwamiTovi