【React + MUI】令和最新版 DatePicker 日本語化

MUI の DatePicker を日本人向けにカスタマイズしていきます。
https://mui.com/x/react-date-pickers/date-picker/
※ 日付ライブラリはdayjsを使用します。

完成イメージ

変更点

ざっくり変更点は以下になります。

• テキストエリア内のフォーマット
• カレンダーヘッダーのフォーマット
• カレンダー内の年一覧のフォーマット
• カレンダーの曜日のフォーマット

テキストエリア内のフォーマット

DatePickerコンポーネントのformatを設定します。

DateComponents.tsx

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export const DateComponents = (): JSX.Element => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker format="YYYY/MM/DD" />
    </LocalizationProvider>
  );
};

カレンダーヘッダーのフォーマット

DatePickerコンポーネントのslotProps.calendarHeader.formatを設定します。

DateComponents.tsx

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export const DateComponents = (): JSX.Element => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
          format="YYYY/MM/DD"
          slotProps={{ calendarHeader: { format: 'YYYY年MM月' } }}
        />
    </LocalizationProvider>
  );
};

カレンダー内の年一覧のフォーマット

LocalizationProviderコンポーネントのdateFormats.yearを設定します。

DateComponents.tsx

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export const DateComponents = (): JSX.Element => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} dateFormats={{ year: 'YYYY年' }}>
      <DatePicker
          format="YYYY/MM/DD"
          slotProps={{ calendarHeader: { format: 'YYYY年MM月' } }}
        />
    </LocalizationProvider>
  );
};

カレンダーの曜日

dayjsに日本語プラグインを追加します。

DateComponents.tsx

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import 'dayjs/locale/ja';

dayjs.locale('ja');

export const DateComponents = (): JSX.Element => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} dateFormats={{ year: 'YYYY年' }}>
      <DatePicker
          format="YYYY/MM/DD"
          slotProps={{ calendarHeader: { format: 'YYYY年MM月' } }}
        />
    </LocalizationProvider>
  );
};

完成系コード

DateComponents.tsx

import { Box } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import 'dayjs/locale/ja';

dayjs.locale('ja'); // カレンダーの曜日のフォーマット

export const DateComponents = (): JSX.Element => {
  return (
    <Box sx={{ p: 10, display: 'flex', justifyContent: 'center' }}>
      <LocalizationProvider
        dateAdapter={AdapterDayjs}
        dateFormats={{ year: 'YYYY年' }} // カレンダー内の年一覧のフォーマット
      >
        <DatePicker
          label="日本語"
          format="YYYY/MM/DD" // テキストエリア内のフォーマット
          slotProps={{ calendarHeader: { format: 'YYYY年MM月' } }} // カレンダーヘッダーのフォーマット
        />
      </LocalizationProvider>
    </Box>
  );
};

ここまで変更出来れば、最低限日本人でも使いやすい入力フォームになるかなと思います。

余談

カレンダーヘッダーのフォーマットは以前まで、
LocalizationProviderコンポーネントのdateFormatsにmonthAndYearを設定すればよかったのですが非推奨な形式として削除されてました...
https://github.com/mui/mui-x/issues/10774
https://github.com/mui/mui-x/pull/10776

代わりにDatePickerコンポーネントにカレンダーヘッダーを上書きできるプロパティが追加されたという経緯みたいです。
https://github.com/mui/mui-x/pull/10990