【備忘録】MUI DatePickerの非活性/表示オプションについて

前置き

今日は10月31日。
世間では、ハロウィンで騒いでいたりいなかったり…
そんな日は早く違う日に変更したい方も居ることだと思います。
そんなあなたはMUI DatePickerを使って変更しましょう！

前提

ライブラリはDayjsを使用
他のライブラリの場合は適宜変更して下さい。

基礎

'use client';

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


return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        <DatePicker />
    </LocalizationProvider>
);

カレンダーを出すとこんな感じ

日本圏表示にする

'use client';

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

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        adapterLocale={'ja'}>
        <DatePicker />
    </LocalizationProvider>
);

これだけだと、カレンダー側はちぐはぐになる

---

直すためにカレンダー側に、フォーマットを設定する。

'use client';

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

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker />
    </LocalizationProvider>
);

色々変えてみる

初期値に今日の日付を入れる

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker value={dayjs()}/>
    </LocalizationProvider>
);

読み取り専用

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker
            value={dayjs()}
            readOnly/>
    </LocalizationProvider>
);

無効

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker
            value={dayjs()}
            disabled/>
    </LocalizationProvider>
);

アイコンの非表示

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker
            value={dayjs()}
            disableOpenPicker/>
    </LocalizationProvider>
);

カレンダーでの日付の選択不可

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker
            value={dayjs()}
            disablePast/>
    </LocalizationProvider>
);

テキストのみ読み取り専用

return (
    <LocalizationProvider 
        dateAdapter={AdapterDayjs}
        dateFormats={{ monthAndYear: 'YYYY年M月' }}
        adapterLocale={'ja'}>
        <DatePicker
            value={dayjs()}
            slotProps={{
                textField: {
                    readOnly: 'readOnly',
                }, 
            }}/>
    </LocalizationProvider>
);

最後に

今回は、テキストのみ読み取り専用を実装するのに調べたので、
備忘録したわけで決してハロウィンになにかあるわけではありません。