如何在时刻使用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 。

这是一个重现该问题的 沙箱。

我究竟做错了什么？

编辑：

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

现在，日期格式显示正确

但是编辑问题仍然存在。我能做些什么来修复它？

原文由 troglodyte07 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我的一位同事提供的修复程序。他使用 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;

原文由 troglodyte07 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您不能同时使用 Material UI picker v3 和 @date-io/moment v2 。您必须使用 @date-io/moment 的 v1.x 版本。

以下是有关此主题的更多信息：

https://material-ui-pickers.dev/getting-started/installation

最好的祝福

妮可

原文由 Nico 发布，翻译遵循 CC BY-SA 4.0 许可协议