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

![blog-hirono-038-001r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818141/5e70a064-8e9b-cd74-6024-d33634fd1d27.png)

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

## 完成イメージ
![001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818141/b7e61bad-7860-6fd4-7fc3-463c195f88b1.gif)

## 変更点
ざっくり変更点は以下になります。
- テキストエリア内のフォーマット
- カレンダーヘッダーのフォーマット
- カレンダー内の年一覧のフォーマット
- カレンダーの曜日のフォーマット

### テキストエリア内のフォーマット
`DatePicker`コンポーネントの`format`を設定します。
```React: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`を設定します。
```React: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`を設定します。
```React: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に日本語プラグインを追加します。
```React: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>
  );
};

```

## 完成系コード
```React: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