JqueryのDatetimepickerまとめ

jquery logo

Jqueryで日付を入力する場合はJquery UIのdatepickerが有名ですが、時間も同時にセットできないのがネック。
というわけでdatetimepickerというのを入れようとするのですが、これが曲者。
同じような名前で何種類もあって設定が良くわかりません。

というわけでまとめました。

timepicker-addon

http://trentrichardson.com/examples/timepicker/
jQuery UI Datepickerに日付と時刻を追加するアドオン。
JQueryUIも入れないといけないので若干面倒。だがすでにJQueryUIを使っているならこれが一番かも?
phpmyadminで使っているものとおなじ(だとだと思う)
ただ、日付と時刻はバーで設定するので若干設定しにくい気がする。

jQuery Date and Time picker

http://plugins.jquery.com/datetimepicker/
https://xdsoft.net/jqplugins/datetimepicker/
Jqueryのサイトからダウンロードできます。設置は簡単なんだけど、時刻の分単位の時間をUIから設定できないっぽい。

同じ作者がPeriodPickerというプラグインも作っていてこちらだと可能らしい。ただし有料。
https://xdsoft.net/jqplugins/periodpicker/

bootstrap-datetimepicker

http://tarruda.github.io/bootstrap-datetimepicker/
Twitter Bootstrap用のdatetimepickerです。ただし、Bootstrap2系専用。BootstrapV3だと動きません。

Bootstrap 3 Datepicker

https://eonasdan.github.io/bootstrap-datetimepicker/
こちらもTwitter Bootstrap用ですが、Bootstrap3系専用です。Bootstrap2とかBootstrap4で動くかは不明。
先のBootstrap2よりもちょっとjsが増えたが、時刻も秒単位で細かく設定できる。
だがしかし、日本語に難あり?カレンダーの年月表記の順番を変えることができなかった。(方法plz)

まとめ

いかがだったでしょうか?
似たような名前でたくさんあるにもかかわらず、設定方法がそれぞれ微妙に違うため、設定方法にはまると調べるのがちょっと大変です。
普通に動かす分には問題ないのですが、問題は日本語表記。作者はみな日本人ではないので、日本語表記は標準対応していません。よっていろいろカスタマイズする必要があるのですが、名前が似ているせいで違うライブラリの説明がヒットしてしまうので混乱の素です。
これを読んで、”名前が似ていて違うものがある”ということを認識して調べるとよいかと思います。

タイトルとURLをコピーしました