如何使用具有 DD/MMM/YYYY 格式或自定義輸入字段的材質 UI Pickers KeyboardDatePicker

Question

目前我的日期選擇器看起來像這樣

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

Answer 1

您還應該注意到：

重要提示：對於 material-ui-pickers v3，請使用 v1.x 版本的 @date-io 適配器。

所以你應該按照 Material UI Picker 的安裝指南在這里。

試試這個：

 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> ); }