最近MBA 買ったんですけど、ずっとドザーだったので全然慣れないshibuso です。トラックパッド使うと指が痛くなって泣ける…。
さて、今回は無料で公開されているdatetimepicker についてまとめたいと思います。datetimepicker と聞いてピンと来ない人は、フォームをクリックするとカレンダーが表示されて、そこで日時を選ぶ機能と思ってもらえば大体合ってます。少し前までプルダウンで年月日を選ぶのが普通だったのに、色々と便利になってきています。
とはいえdatetimepicker はまだあまり選択肢が無いように感じます。私の検索の仕方が悪いのかもしれませんが、日付のみを選択できるdatepicker の方が多いかと。そんな中、今回はdatetimepicker で検索して見かけた3 種類のdatetimepicker を、デモを交えて比較したいと思います。
- xdan/datetimepicker
- Eonasdan/bootstrap-datetimepicker
- smalot/bootstrap-datetimepicker
注）それぞれGitHub のリポジトリ名で記載しています
xdan/datetimepicker
今回紹介する中では唯一Bootstrap を利用していません。そのこともあり、この中では一番シンプルに導入することが可能です。
デフォルトでは1 時間単位での時間の選択肢が表示されますが、この単位はパラメータで指定することが出来ます。ただしあまり細かくし過ぎるとスクロールが若干面倒になります。1 分単位で決めたい場合は直接フォームに入力してもらった方が良いかもしれません。
今回紹介している3つの中で唯一日付と時間を同画面で選択できるので使い勝手は良いように感じます。
Eonasdan/bootstrap-datetimepicker
Bootstrap を利用したdatetimepicker では古参のようで、且つ最近も更新されています。Bootstrap を利用しているサイトでは違和感なく導入出来るのではないかと思います。
初期の設定ですと日付と時間の選択が別窓になっているので少々使い勝手が劣る気がしますし、初めて利用する方は存在に気づかない事もあるのではないかなと思います。オプションで両方並べて表示する事が可能なので、気になる場合はそちらを利用すると良いかもしれません。
もう1 点気になるのは、データのフォーマットです。デフォルトだとAM, PM での表示なので、利用者は便利なのかもしれませんが値を受け取った後の処理が多少面倒に感じます。加えて日本語化した場合は時間や分の単位まで表示されるので、ここはフォーマットを指定した方が無難かもしれません。
それと、「今日」を選択できるボタンが無いのもちょっと痛いところかもしれません。
なおbower やRails 用のパッケージが用意されているので、それらを利用している方はそちらからの導入を試してみると楽かもしれません。
smalot/bootstrap-datetimepicker
こちらもBootstrap を利用したものですが、前出のものと比べると時間の指定方法に違いがあります。こちらでは日付を選択した後に時間の表示に切り替わるため、ユーザに時間の指定を忘れずに行うことを促すことが出来ます。ただし一発で決定することが出来ないので「まだ決まらないのか」という気持ちになったりならなかったり？
最小の選択単位は調整可能です。例えば分単位を省略させたり、そもそも時間の指定をすっ飛ばすことも可能ですが、その場合デフォルトで入る値が「今の時間」なので、そこの部分でちょっと戸惑う場合もありそうです。（時間の入力を省略したらdatetimepicker を使う意味がなくなってしまいますが！）
余談ですがBootstrap のdatepicker 及びdatetimepicker はこのリポジトリから派生しているのでしょうかね？ 大体表示方法も同じに見えます。
まとめ
Bootstrap が好きであればBootstrap をベースにした2 つから目的にあったものを選べば良いと思いますが、個人的には最初に紹介したものが一番シンプルで且つ使い勝手も良いように思いました。とはいえカスタマイズすることによってBootstrap 系のものも使いやすさは変わってくるので、場面によって使い分けていけば良いのかもしれません。
上記説明に書かなかったものも含め、下記テーブルに要点をまとめてみました。
| xdan/datetimepicker | Eonasdan/bootstrap-datetimepicker | smalot/bootstrap-datetimepicker | |
|---|---|---|---|
| テーマ | オリジナル | Bootstrap | Bootstrap |
| 導入難易度 | 一番ファイル数少ない、簡単 | Bootstrap に加えてmoment.js が必要でちょっと多い、でもパッケージが用意されてる | Eonasdan よりファイル数少ないけど、xdan より多い |
| 操作性 | 使いやすい | カスタマイズによる？ | ちょっと面倒 |
| 週始まりの変更 | 可能 | 見つけられず | 可能 |
| 「今日」の選択 | 可能 | 見つけられず | 可能 |
| インライン表示 | 可能 | 可能 | 可能 |
| 日付・時間だけの表示 | 可能 | 可能 | 可能 |
| 日本語対応 | ok | ok | ok |
| unixtimeの取得 | 可能 | 見つけられず | 見つけられず |
それと、デモはGitHub Pages をiframe で呼び出して表示していますが、不具合がありましたら直接見ていただけたらと思います。
- xdan/datetimepickerのデモページ
- Eonasdan/bootstrap-datetimepickerのデモページ
- smalot/bootstrap-datetimepickerのデモページ