🕰️
日時選択ライブラリまとめ
記事の概要
日時選択ができる機能が必要となったのであれこれ見たところ、使いやすさなどで各ライブラリのメリット・デメリットが見えてきたため、備忘録としてざっくりまとめます。
MUI X Date/Time pickers
TL;DR
今回は MUI X Date/Time pickers を選択しました。
- GUIで時間を入力するのは不便なので、文字での入力も受け付けたい
- GUIでの入力は、アナログ時計の方がクリック数が減るので望ましい
- Material UIを使っているので、Material Designベースだとなお助かる
というのが背景です。
想定読者
- 日時選択がしたい人
- ざっくりでいいので使い勝手を知りたい人
本題
MUI X Date/Time pickers （今回はこれを選択）
- Material UIの拡張ライブラリ（選択した理由①）
- 表示：アナログ時計
- 日付だけ、時間だけ、日時両方でそれぞれ別のコンポーネントが用意されている
- 文字列での入力が可能（選択した理由②）
- moment.js, dayjsなど他の日付ライブラリが必要
Material UI Pickers
- Material Designベース
- 表示：アナログ時計
- 日付だけ、時間だけ、日時両方でそれぞれ別のコンポーネントが用意されている
- モーダルが開く
- 文字列での入力は不可能（この記事を書くきっかけ）
- moment.js, dayjsなど他の日付ライブラリが必要
react-datetime
- 表示：デジタル時計
- 同じコンポーネントで日付だけ、時間だけにすることも可能
- 文字列での入力も可能
- moment.js, dayjsなど他の日付ライブラリが不要
React-DateTime-Picker
- 表示：アナログ時計
- 日時両方必須
- 日付or時間だけ使いたい場合は同作者のReact-Date-PickerとReact-Time-Pickerがある
- 文字列での入力も可能
- moment.js, dayjsなど他の日付ライブラリが不要
Discussion