MUIのDate Pickerに関する日本語の問題対処

メモ

githubに欲しかった回答があったけども
日本語で探してなかったので、これから困る誰かのためにメモをしておきます

本題

PickersCalendarHeaderは基本的に MM YYYY の順に設定されている。

日本人からすると YYYY MM に並べたい問題が生じる。

そこでの対応がこちら

全体感

上記の箇所以外にも並び替えがしたかったので以下の設定に行き着いた

const CustomDatePickerToolbar = (props: any) => {
  const { date, changeYear, changeMonth, isLandscape, onChange, ...other } = props
  return (
    <DatePickerToolbar
      toolbarFormat="YYYY年MM月" // スマホ用の画面で出るツールバーの順番を整備
      isLandscape={isLandscape}
      onChange={onChange}
      value={date}
      view={date}
      {...other}
    />
  )
}


<LocalizationProvider dateAdapter={AdapterDayjs} dateFormats={{ monthAndYear: "YYYY年 MM月" }}> //　inputの箇所の並び替え
... react-hook-formのラッピング
            <DemoItem label={label}>
              <DatePicker
                {...field}
                {...rest}
                disabled={disabled}
                defaultValue={dayjs('2000-01')}
                disableFuture={true}
                views={['year', 'month']}
                openTo="year" // 年から選べるようにする
                format="YYYY年MM月" // input後のform内の表示を変える
                onChange={(newValue: dayjs.Dayjs | null) =>
                  onChange(newValue ?? dayjs(newValue).format('YYYY-MM'))
                }
                slots={{
                  toolbar: CustomDatePickerToolbar,
                }}
              />
            </DemoItem>
...
</LocalizationProvider>