Material Ui DatePicker 使用键盘输入时总是得到无效日期

Question

我试图将 mui-x/datepicker 与佛教年份一起使用，使用 dayjs 作为适配器，当我使用日历弹出窗口作为输入时，它工作正常，但是当我使用键盘输入日期并将年份更改为小于或大于文本字段中的“2565”，我总是得到“无效日期”。

这是我的代码

import { useState } from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { TextField } from "@mui/material";
import dayjs from "dayjs";
import buddhistEra from "dayjs/plugin/buddhistEra";
import "dayjs/locale/th";

dayjs.locale("th");
dayjs.extend(buddhistEra);

const dateformats = const dateformats = {
  year: "BBBB",
  monthAndYear: "MMMM BBBB",
  keyboardDate: "DD/MM/BBBB"
};

export default function App() {
  const [protectionPrdFrom, setProtectionPrdFrom] = useState(dayjs());

  return (
    <div className="App">
      <h3>{protectionPrdFrom ? protectionPrdFrom.toString() : ""}</h3>
      <LocalizationProvider
        dateFormats={dateformats}
        dateAdapter={AdapterDayjs}
        adapterLocale="th"
      >
        <DatePicker
          showToolbar
          maxDate={dayjs(new Date(3000, 12, 31))}
          minDate={dayjs(new Date(1990, 1, 1))}
          inputFormat="DD/MM/BBBB"
          views={["year", "month", "day"]}
          value={protectionPrdFrom}
          onChange={(date, keyboardDate) => {
            setProtectionPrdFrom(date);
          }}
          renderInput={(params) => (
            <TextField {...params} size="small" fullWidth />
          )}
        />
      </LocalizationProvider>
    </div>
  );
}

这里是我的演示的链接 My Mui Datepicker

Answer 1

我认为 mui 的 Adapter 不支持键盘输入，我猜。

所以你可以尝试这个佛教年的外部库。

https://github.com/tarzui/date-fns-be

^^