日付・時刻を入力するコンポーネントの使い方（MUI）

はじめに

先日、MUIを使って日付・時刻の入力処理を実装しました。公式のドキュメントやブログを参考に実装したのですが、中には情報が古く参考にならないものもあったので改めて基本的な使い方をまとめてみました。

パッケージのインストール

MUIの日時入力コンポーネントを使用するには@mui/x-date-pickersをインストールします。また、Locale・型などの指定にdayjsを使用します。

npm i @mui/x-date-pickers
npm i dayjs

使い方

全体像

全体像は以下の通りです。今回はMUIの日時入力コンポーネントDateTimePickerをラップした日時入力用コンポーネントを作成しました。

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

interface Props {
  date: Dayjs|null,
  handleChange: (newValues: any) => void,
  format?: string,
}

const InputDateWithTime = ({
  date,
  handleChange,
  format = 'YYYY/MM/DD HH:mm' ,
}: Props) => {

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'ja'}>
      <DateTimePicker
        value={date}
        format={format}
        onChange={handleChange}
        slotProps={{ calendarHeader: { format: 'YYYY/MM' }}}
        ampm={false}
      />
    </LocalizationProvider>
  );
};

export default InputDateWithTime;

カレンダーの言語設定

カレンダー（曜日、年月日 など）の言語設定に必要な記述は以下の2つです。これらを指定することで図1のようにカレンダーが日本語表記になります。

import 'dayjs/locale/ja';

<LocalizationProvider adapterLocale={'ja'}>

図1 日本語表記に対応したカレンダー

フォーマット（入力欄）

DateTimePickerのprops「format」に任意のフォーマットを渡すことで、入力時のフォーマットを指定できます。

<DateTimePicker
  format={format} // 今回の場合はformat={'YYYY/MM/DD HH:mm'}
/>

フォーマット（カレンダー）

以下のようにslotPropsでフォーマットを指定することで、図2のようにカレンダー右上の日付のフォーマットを指定することができます。

<DateTimePicker
  slotProps={{ calendarHeader: { format: 'YYYY/MM' }}}
/>

図2 カレンダー内の日付のフォーマット指定

24時間表記

時刻の入力を24時間表記にするにはampm={false}を指定します。

<DateTimePicker
  ampm={false}
/>

コンポーネントの種類

私が今回の実装で使用したコンポーネントは以下の3つです・
・DateTimePicker（日付と時刻の入力）
・DatePicker（日付の入力）
・TimePicker（時刻の入力）
今回はDateTimePickerコンポーネントの使い方についてご紹介しましたが、DatePicker・TimePickerコンポーネントについてもほぼ同じように使えます。