📆

MUI X DateTimePickerの使い方・カスタマイズ方法

2022/12/28に公開

React

記事の概要

MUI X DateTimePickerの使い方・カスタマイズ方法がいい感じにまとまっているページがあまりなかったため、備忘録的にまとめました。
カスタマイズは最低限ですが、末尾により複雑なカスタマイズをやっておられる記事のリンクをつけてあります。

MUI X DateTimePicker　とは？

MUI X DateTimePickerを選択した経緯は以前こちらにまとめました。

想定読者

Material UIを使っている人
MUI X DateTimePickerを初めて触る人

本題

TL:DR;　今回書いたコードの全貌

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Dayjs } from 'dayjs';
import { jaJP } from '@mui/x-date-pickers';
import { styled } from '@mui/material/styles';

const StyledTextField = styled(TextField)({
  '& input': {
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: '14px',
    height: '38px',
  },
});

export default function CustomDateTimePicker() {
  const [startDate, setStartDate] = React.useState<Dayjs | null>(null);
  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      adapterLocale={jaJP}
      dateFormats={{ monthAndYear: 'YYYY年 MM月' }}
      localeText={{
        previousMonth: '前月を表示',
        nextMonth: '次月を表示',
      }}
    >
      <DateTimePicker
        label="開始日"
        inputFormat="YYYY/MM/DD HH:mm" // 日時の表示方式を設定
        renderInput={(props) => <StyledTextField InputLabelProps={{ shrink: true }} {...props} />}
        value={startDate}
        disableFuture // 未来の日時を選択できなくなる
        onChange={(newValue: Dayjs | null) => {
          newValue !== null && setStartDate(newValue);
	  console.log(newValue?.format('YYYY/MM/DD HH:mm'));
        }}
      />
    </LocalizationProvider>
  )
}

import

必須中の必須

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

使用する日時ライブラリによって選択肢が変わる部分

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Dayjs } from 'dayjs';
.
.
.
<LocalizationProvider dateAdapter={AdapterDayjs}>

今回は別の部分で既にDayjsを使用していたので、それを踏襲しました。

必須ではないが、日時を日本表記にするのに入れておきたい

import { jaJP } from '@mui/x-date-pickers';
.
.
.
<LocalizationProvider adapterLocale={jaJP}>

ただし、後述の日時表記の変更をやる場合は不要かもしれません。

後述のstyled()に必要

import { styled } from '@mui/material/styles';

初期値

初期値を今日の日時にする

const [startDate, setStartDate] = React.useState<Dayjs | null>();

初期値を空にする

const [startDate, setStartDate] = React.useState<Dayjs | null>(null);

初期値を特定の日時にする

const [startDate, setStartDate] = React.useState<Dayjs | null>(dayjs('2022/04/01 12:00'));

ラベル

ラベルを付ける

<DateTimePicker label="日時" />

かつ初期値が空の時にラベルの位置が変わらないようにする

<DateTimePicker
  label="日時"
  renderInput={(props) => <TextField InputLabelProps={{ shrink: true }} {...props} />}
/>

TextFieldのサイズをstyled()（後述）で変更すると、ラベルの表示位置が崩れてしまうのでその回避としてInputLabelProps={{ shrink: true }}を入れています。
shrinkについての詳細はこちら

見た目の変更

今回はstyled()を使います。
https://mui.com/system/styled/
react-selectとheightを揃えたかったので、このように書きました。

const StyledTextField = styled(TextField)({
  '& input': {
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: '14px',
    height: '38px',
  },
});

labelの見た目を変える場合は、次のように書くことができます。

'& label': {}

日時表示の変更

ここから先をやる場合、冒頭でimportした

import { jaJP } from '@mui/x-date-pickers';

は不要そうです。（表示を自分で設定するため）

<LocalizationProvider
  dateFormats={{ monthAndYear: 'YYYY年 MM月' }}
  localeText={{
    previousMonth: '前月を表示',
    nextMonth: '次月を表示',
  }
>
  <DateTimePicker
    inputFormat="YYYY/MM/DD HH:mm" // 日時の表示方式を設定
  />
</LocalizationProvider>

のように書くことで、カレンダー表示の年・月を日本語表記、inputの表示方式を変更することができます。

その他・参考情報

冒頭でサラッと触れたdisableFutureは公式のAPI一覧から見つけました。
DateTimePicker API

日本語化に加えて、土日の色調整・週単位選択など細かなカスタマイズをされている例はこちらです。
（大変助かりました！）