【jQuery不要】Javascriptのみで動くdatetimepickerまとめ

2022.02.16

2023.10.19

jQueryを使わずにdatetimepickerを扱いたい場合に使いやすそうなものをまとめてみました。

簡単にデモも用意しています。→こちら

flatpickr

個人的に一番オススメです。

カレンダータイプで、日付も時間も選択可能。

導入も簡単だし、日本語も対応してます。

公式ドキュメントが充実してる。

シンプルだけど実際に動かして確認できるのでめちゃくちゃわかりやすくとても良きです。

唯一デメリットとしては、zip内にminファイルがないので、npmでmoduleインストールして使うか、CDNを利用することになります。

CDNのファイルを保存するでもいいんですが、若干手間ですよね。

カレンダータイプで、日付のみ選択可能。

moment.jsという日付まわりのライブラリが必要。

導入は簡単。日本語も対応してます。

こちらも公式ドキュメントが充実してて、読みやすくわかりやすいです。

Lightpick（日付のみ）

カレンダーじゃないタイプ。スマホでのselectタグみたいにスクロールして選択。

日付も時間も選択可能。

導入は簡単。

公式ドキュメントはGitHubにまとめてあり、読みやすい印象です。

日本語対応はしてませんが、関数内でテキストを指定できるので、日本語化はかなり簡単です。

マテリアルデザインなので見た目は好き。

日付も時間も選択可能。

moment.jsが必要。

個人的に公式ドキュメントがめちゃくちゃわかりづらいので残念です。

さくっと導入できないものはなかなか使わないよなと思います。

日本語化もよくわからず…。

選択可能の日付が本日以前がデフォルトになる。（例えば、日付が2022/2/16ならば、2022/2/17以降は選択できない）

日付のフォーマットも変え方よくわからなかったのでそのあたりがなんとかなれば使ってもいいのかなと思います。

jQueryなしでdatetimepickerを利用するなら、flatpickrか、Lightpickで充分事足りると思います！