Material-UI Pickers×Moment.jsをReact(TypeScript)で使う際のtips

業務でMaterial-UI PickersをMoment.jsで使いたいと思った際に
マテリアルUIのサイトはあてにならなかったので参考になればと思います。

環境/パッケージのversion

react　16.12.0
typescript　3.7.3
moment　2.24.0
@material-ui/pickers　3.2.10
@date-io/moment　1.3.13

material-ui-pickers v3ではdate-io系のversionは1.x.xを使わないとうまくいかないみたいなので1.3.13いれてます。
最初これよく読まなかったので、エラーがでまくりで死にそうでした
Material-UI Pickersサイト

実装

実装の詳細について書いていきます。

全体

これで一つのコンポネントです

import React, { FC } from 'react'
import MomentUtils from '@date-io/moment';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers'
import moment, { Moment } from 'moment'

const DatePicker: FC = () => {
  const [selectedDate, setSelectedDate] = React.useState<Moment | null>(
    moment()
  );

  const handleDateChange = (date: Moment | null) => {
    setSelectedDate(date)
  };

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="YYYY/MM/DD"
        value={selectedDate}
        onChange={handleDateChange}
      />
      <KeyboardTimePicker
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  )
}

export default DatePicker

import

import React, { FC } from 'react'
import MomentUtils from '@date-io/moment'
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers'
import moment, { Moment } from 'moment'

• React, { FC }　FunctionCompornentをいれてます。
• MomentUtils アダプターです。こちらいれないとMomentのオブジェクトを日付と認識してくれません。
• MuiPickersUtilsProviderこいつでかこってあげないとMomentUtilsを反映できません。
• KeyboardTimePicker KeyboardDatePicker　keybordでも日付を操作したいので。
• moment これがないと日時を簡単に扱えません。
• Moment momentの型interfaceです。typescriptでは定義してあげないと怒られます。

state

stateで行き交うデータは全てMoment型なのを注意してください。

const [selectedDate, setSelectedDate] = React.useState<Moment | null>(
  moment()
);

初期stateにmoment()で現在時刻をsetします。
useState<Moment | null>で型をMoment型にしてあげないとエラーがでます。

const handleDateChange = (date: Moment | null) => {
  setSelectedDate(date)
};

メゾットに関してもpickerから引数で渡されるdateの型はMomentなので定義してあげましょう。

render

return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="YYYY/MM/DD"
        value={selectedDate}
        onChange={handleDateChange}
      />
      <KeyboardTimePicker
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  )

<MuiPickersUtilsProvider utils={MomentUtils}>　これで囲わないと正しくMomentに変換できずにエラーがでます。utils内にアダプタ名を記述します。

ここで地味につまずいたのはformatで、全部大文字にしないと正しく表示されないので大文字で。
多分Momentが大文字しか認識しないのかと。

まとめ

@date-ioのversionミスしたりstateの型をDateでやってしまったりとなかなかつまずいたので、参考になれば幸いです。
Muiは日本語のtipsが少ないからハマったら長い。。。
改善、修正点ございましたら気軽にコメントくださいませ。