如何在时刻使用material-ui-pickers KeyboardDatePicker？

Question

我正在将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。

这里是sandbox，它再现了问题。

我在做什么错了？

编辑：

看到Nico的回答后，我将date-io/moment的版本更改为1.3.13

现在，日期格式可以正确显示

但是编辑问题仍然存在。我该怎么解决？

Answer 1

这是我的一位同事提供的修复程序。他使用了inputValue的{​​{1}}和value道具。 KeyboardDatePicker采用日期类型，而value采用格式化的日期字符串。并且还如下使用inputValue道具来解决编辑问题。我还更新了sandbox

rifmFormatter

Answer 2

您不能同时使用材料UI选择器 v3 和@ date-io / moment v2 。您必须使用@ date-io / moment的 v1.x 版本。

有关此主题的更多信息：
https://material-ui-pickers.dev/getting-started/installation

最诚挚的问候
尼科