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

问题描述

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

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

解决方法

您还应该注意：

重要提示：对于材料用户界面选择器v3，请使用@ date-io适配器的v1.x版本。

因此，您应该遵循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>
  );
}