🕰️

日時選択ライブラリまとめ

2022/12/15に公開約1,500字

記事の概要

日時選択ができる機能が必要となったのであれこれ見たところ、使いやすさなどで各ライブラリのメリット・デメリットが見えてきたため、備忘録としてざっくりまとめます。
MUI X Date/Time pickers
MUI X Date/Time pickers

TL;DR

今回は MUI X Date/Time pickers を選択しました。

  • GUIで時間を入力するのは不便なので、文字での入力も受け付けたい
  • GUIでの入力は、アナログ時計の方がクリック数が減るので望ましい
  • Material UIを使っているので、Material Designベースだとなお助かる

というのが背景です。

想定読者

  • 日時選択がしたい人
  • ざっくりでいいので使い勝手を知りたい人

本題

MUI X Date/Time pickers (今回はこれを選択)

https://mui.com/x/react-date-pickers/getting-started/
https://codesandbox.io/s/bbpdvq?file=/demo.tsx

  • Material UIの拡張ライブラリ(選択した理由①)
  • 表示:アナログ時計
  • 日付だけ、時間だけ、日時両方でそれぞれ別のコンポーネントが用意されている
  • 文字列での入力が可能(選択した理由②)
  • moment.js, dayjsなど他の日付ライブラリが必要

Material UI Pickers

https://material-ui-pickers.dev/getting-started/usage

  • Material Designベース
  • 表示:アナログ時計
  • 日付だけ、時間だけ、日時両方でそれぞれ別のコンポーネントが用意されている
  • モーダルが開く
  • 文字列での入力は不可能(この記事を書くきっかけ)
  • moment.js, dayjsなど他の日付ライブラリが必要

react-datetime

https://www.npmjs.com/package/react-datetime
https://codesandbox.io/s/yq7z73538z?file=/src/index.js

  • 表示:デジタル時計
  • 同じコンポーネントで日付だけ、時間だけにすることも可能
  • 文字列での入力も可能
  • moment.js, dayjsなど他の日付ライブラリが不要

React-DateTime-Picker

https://www.npmjs.com/package/react-datetime-picker
https://projects.wojtekmaj.pl/react-datetime-picker/

  • 表示:アナログ時計
  • 日時両方必須
  • 文字列での入力も可能
  • moment.js, dayjsなど他の日付ライブラリが不要

Discussion

ログインするとコメントできます