Material-uiでDate pickerを使うときの注意点

本記事の目的

ReactのCSSフレームワーク「Material-ui」で日時入力（Date/Time）をするためのフォームを実装する際に詰まったので、メモ。

Material-ui公式ドキュメント内の該当項目はこちら↓
https://material-ui.com/components/pickers/

1. 必要なコンポーネント

公式ドキュメントの記載が不親切で、初心者には何が必要かいまいち分からなかった。 下記３つのコンポーネントの導入で動作しました。

"date-fns": "^2.16.0",
"@date-io/date-fns": "1.x"
"@material-ui/pickers": "^3.2.10"

※２０２０年8月時点のヴァージョン
注：ヴァージョン制限に注意、下記2.で解説

date-fns以外にも、moment,luxion,dayjsがあるけど、
詳しくないのでMaterial-uiの公式ドキュメント内で採用されている、date-fnsを採用。
※比較記事見つけたら追記します。

2. @date-ioのヴァージョン制限

これも公式ドキュメントをしっかり読めという話だけど、 https://material-ui-pickers.dev/ の中に、 >Important: For material-ui-pickers v3 use v1.x version of @date-io adapters. ※意訳：v3のmaterial-ui-pickersnにはv1.X台の@date-ioを使いなさい。

とある。これを見逃してエラーにハマったので大事。

実装例

DatePickerコンポーネントの実装例を記載します。 useStateを上位から渡していますが、もっと良い方法があれば、ご指摘いただける嬉しいです。

import React from 'react';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

const DatePicker = ({ selectedDate, setSelectedDate }) => {
  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="yyyy/MM/dd"
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
};

export default DatePicker;