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

【问题标题】：How to use material-ui-pickers KeyboardDatePicker with moment?如何在时刻使用material-ui-pickers KeyboardDatePicker？
【发布时间】：2020-06-21 08:38:37
【问题描述】：

我正在使用 material-ui-pickers 中的 KeyBoardDatePicker 和 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

现在，日期格式显示正确

但编辑问题仍然存在。我能做些什么来解决它？

【问题讨论】：

你解决了编辑问题吗？
@an0o0nym 我发布了一个答案。请看一下

标签： reactjs material-ui momentjs

【解决方案1】：

这是我的一位同事提供的修复程序。他使用了KeyboardDatePicker 的inputValue 和value 道具。 value 采用日期对象，inputValue 采用格式化的日期字符串。并且还使用了rifmFormatter prop 来修复编辑问题。我还更新了sandbox

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;

【讨论】：

感谢您发布答案！我注意到我的问题是我在 mui 的Dialog 中有一个KeyboardDatePicker。我相信这会在导致错误的日期更改时以某种方式重新呈现 Dialog 组件。然而，当 KeyboardDatePicker 位于 mui 的 Dialog 组件之外时，一切正常。我发布此评论以防万一有人遇到类似问题。
请允许一个小火焰——据我所知，整个环境是程序员为程序员创造的巨大的工作和收入保障工作。我在 2021 年 3 月来到这里，因为我想要一个我认为简单易用的小部件——一个将给定日期描述为“03/12/2021”的日期选择器。我认为这是处理日期的任何语言中任何合理组件中的“mm/dd/yyyy”格式字符串。我已经在这里待了将近一天，没有任何喜悦。顺便说一句，它不适用于上述代码。这真的是我们能做的最好的吗？火焰>

【解决方案2】：

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

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

最好的问候
妮可

【讨论】：

我把date-io/moment的版本改成了1.3.13。现在，日期格式显示正确，但编辑问题仍然存在。我该如何解决？