如何使用具有 DD/MMM/YYYY 格式或自定义输入字段的材料 UI 选择器 KeyboardDatePicker答案

【问题标题】：How can use material UI Pickers KeyboardDatePicker with DD/MMM/YYYY format or with a custom input field如何使用具有 DD/MMM/YYYY 格式或自定义输入字段的材料 UI 选择器 KeyboardDatePicker
【发布时间】：2020-12-08 19:09:50
【问题描述】：

目前我的日期选择器看起来像这样

import React, { useState } from "react";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
function KeyboardDatePickerExample(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyboardDatePicker
        value={selectedDate}
        onChange={(date) => handleDateChange(date)}
        format="DD/MMM/YYYY"
      />
    </MuiPickersUtilsProvider>
  );
}

export default KeyboardDatePickerExample;

但是，当我尝试输入日期时，它只是数字，所以它看起来像 00/000/0000 而不是 00/Dec/0000。

所以我想知道是否有办法解决这个问题，或者使用我自己的输入字段。

https://codesandbox.io/s/objective-goodall-7bn71

【问题讨论】：

能否提供一个代码沙箱代码？我已经创建了这个CodesandBox，但是当我打开选择器时它就崩溃了，让我知道我错过了什么
您好，我已经编辑了帖子并分享了一个代码框链接。一旦我使用了最新的 moment 1.x 版本，崩溃就消失了。

标签： reactjs datepicker material-ui

【解决方案1】：

您还应该注意到：

重要提示：对于 material-ui-pickers v3，请使用 v1.x 版本的 @date-io 适配器。

所以你应该遵循 Material UI Picker here 的安装指南。

试试这个：

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

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyboardDatePicker
        value={selectedDate}
        onChange={(date) => handleDateChange(date)}
        format="DD/MMM/YYYY"
      />
    </MuiPickersUtilsProvider>
  );
}

【讨论】：

是的。我已经安装了，一切正常。但是，它不接受我输入月份的字符。