How do I change the language of DatePicker in the MUI to Japanese?

Is there a way to change the MUI DatePicker language to Japanese?
When I wrote a code similar to the one below, I got the error TypeError: Cannot read properties of undefined (reading 'date') in my browser.
Delete locale="ja" to display DatePicker but in English.

/*eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource*/
/** @jsxImportSource @emotion/react*/
import {memo, VFC, useState} from "react";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import TextField from "@mui/material/TextField";

export const TestPicker: VFC=memo()=>{
  const [value, setValue] = useState<Date|null>(null);

  return(
    <LocalizationProvider dateAdapter={AdapterDateFns} locale="ja">
      <DatePicker
        value = {value}
        onChange={(newValue)=>{
          setValue(newValue);
        }}
        renderInput={(params)=><TextField{...params}/>}
      />
    </LocalizationProvider>
  );
});

The versions of each package are as follows:

 ----@emotion/[email protected]
├-- @emotion/[email protected]
├-- @mui/icons-material @5.0.1
├-- @mui/lab @5.0.0 - alpha.48
├-- @mui/material @5.0.1
├-- @types/[email protected]
├-- @types/react-dom @17.0.9
├-- @types/[email protected]
├-- [email protected]
├-- [email protected]
├-- [email protected]
├-- [email protected]
├-- [email protected]
・
・
・

javascript reactjs typescript material-ui

2022-09-29 22:03

1 Answers

If you use date-fns locale, it will be in Japanese.

import ja from "date-fns/locale/ja";
<LocalizationProvider dateAdapter={AdapterDateFns} locale={ja}>

2022-09-29 22:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656