MUI v6 Date Calendarコンポーネントの日本語化

結果

　　

コード

import { useState } from 'react';
import { ThemeProvider, createTheme } from '@mui/material';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { jaJP } from '@mui/x-date-pickers/locales';
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";

class DateAdapter extends AdapterDateFns {
    // 参考サイトの実装例よりも、端折っているが、日曜始まりが固定なら以下で十分。
    getWeekdays = (): string[] => ['日', '月', '火', '水', '木', '金', '土'];
}

export const SpeechRecognitionEditPage: React.FC = () => {
    const TODAY = new Date();
    const [selectedDate, setSelectedDate] = useState(TODAY);

    const theme = createTheme(
        {},
        jaJP, // x-date-pickers translations
    );

    const onChangeHandler = (e: Date | null) => {
        if (!e)
            return;
        setSelectedDate(new Date(e.getFullYear(), e.getMonth(), e.getDate()));
    }

    return (
        <ThemeProvider theme={theme}>
            <LocalizationProvider dateAdapter={DateAdapter} dateFormats={{ monthAndYear: "yyyy年 MM月", monthShort: "MM月" }} >
                <DateCalendar
                    views={['month', 'day']}
                    value={selectedDate}
                    maxDate={TODAY}
                    onChange={onChangeHandler}
                />
            </LocalizationProvider>
        </ThemeProvider>
    );
}

曜日ヘッダーは、公式プロップスのdayOfWeekFormatterでもよさそう。

参考