material-ui

Material Ui DatePicker always get invalid date when type with keyboard


I was trying to use mui-x/datepicker with a buddhist year using dayjs as the adapter, when I use the calendar popup as the input it works fine , but when I type the date using keyboard and change the year to less than or greather than '2565' in the textfeild I always get 'Invalid date'.

Here my code

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

Here the link for my demo My Mui Datepicker


Solution

  • i think Adapter from mui is not support for input from keyboard input, i guess.

    So you can try this external lib for buddhist year .

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

    ^ ^