material-ui-pickers の v3 から v4 にアップデートした

Material UI を使っている方は、DateTime picker として、 material-ui-pickers を使われている方も多いのではないでしょうか？

ただ、 material-ui-pickers の v3 は、Date ライブラリとして date-io(https://github.com/dmtrKovalenko/date-io) を使用する場合、最新バージョンが使用できない問題がありました。

v4 にすることで、 Date ライブラリへのアダプターを用意してくれているようです。

この記事の執筆時点では alpha8 が出ていたので、そのバージョンにアップデートしました。

いくつか破壊的な変更があったので、v3 と v4 のコードを載せておきます。

code:jsx

import DateFnsUtils from '@date-io/date-fns';

import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';

<DatePicker

autoOk

disablePast

value={date}

onChange={handleChangeDate}

label="DateTime picker"

format="yyyy/MM/dd"

</MuiPickersUtilsProvider>

code:javascript

import DateFnsUtils from '@material-ui/pickers/adapter/date-fns';

import { DatePicker, LocalizationProvider } from '@material-ui/pickers';

import TextField from '@material-ui/core/TextField';

<DatePicker

autoOk

disablePast

value={date}

onChange={(date) => handleChangeDate(date)}

label="DateTime picker"

inputFormat="yyyy/MM/dd"

renderInput={(props) => <TextField {...{ ...props, ...{ helperText: '' } }} />}

</LocalizationProvider>

Provider クラス名が LocalizationProvider になり、 date ライブラリの指定も変わりました。

DatePicker については、↑が最低限の設定で、まだまだ設定はできます。

まだドキュメントにはなっていないようなので、ちょっと調べる必要はあります。

少しどうなのかな？と思ったのが、 renderInput です。

これにより、より柔軟に注釈部の表現を変更できるのですが、例えばよしなに注釈を入れてしまう、など余計なことをしてしまいます。

そのため、↑の例では helperText にわざとから文字を入れています。

この辺りは画面のデザインによっては有用な props になるかもしれませんが、少なくとも私はオプショナルな値にして欲しかったなっと思いました。