[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには？

質問

を使っています。 KeyBoardDatePicker から material-ui-pickers と moment utils はDatePickerの場合です。

import React, { Fragment, useState } from "react";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="D MMM, YYYY"
          onChange={handleDateChange}
          minDate={moment().subtract(6, "months")}
          maxDate={moment()}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

export default KeyboardDatePickerExample;

でも、うまく動作しないんです。

まず、日付の書式が正しく表示されていません。

編集しようとすると、ランダムなテキストが表示され、エラーになります。 invalid date format .

以下は サンドボックス で、この問題を再現しています。

何が間違っているのでしょうか？

EDIT :

Nico さんの回答を見て、バージョンアップしてみました。 date-io/moment から 1.3.13

これで、日付の書式が正しく表示されるようになりました

しかし、編集の問題はまだ存在します。どうすれば直るのでしょうか？

解決方法を教えてください。

これは、私の同僚が提供した修正方法です。彼は inputValue と value のプロップスです。 KeyboardDatePicker . value は日付オブジェクトを受け取り inputValue は、フォーマットされた日付文字列を取ります。また rifmFormatter プロパティを以下のように変更することで、編集の問題を解決しました。また サンドボックス

import React, { Fragment, useState } from "react";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  const [selectedDate, setDate] = useState(moment());
  const [inputValue, setInputValue] = useState(moment().format("YYYY-MM-DD"));

  const onDateChange = (date, value) => {
    setDate(date);
    setInputValue(value);
  };

  const dateFormatter = str => {
    return str;
  };

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="YYYY-MM-DD"
          inputValue={inputValue}
          onChange={onDateChange}
          rifmFormatter={dateFormatter}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

export default KeyboardDatePickerExample;