日付入力といえばJQueryUIのdatepickerだが、時間用に何かいいUIがないかと探したところ、timepickerというものがあるらしい。今回はそれを使用してみる。
 
1. timepickerを入手する
2. サイトに設置する
3. 基本的な設定

1. timepickerを入手する

timepickerはdatepickerと違い、JQueryUiの公式サイトからは入手できないようなので、こちらのgithubから入手する。
「Download ZIP」から一旦全ファイルを落とし解凍、最低限必要な以下のファイルをサーバーに設置する。
  • jquery.timepicker.css
  • jquery.timepicker.min.js
その他必要なファイルはケースバイケース。

2. サイトに設置する

css, jsいつもどおりに読み込み。
をJQuery, JQueryUIは読み込み場所より後ろに記述。

3. 基本的な設定

こちらを参考にさせていただきながら設定してみる。
参考サイトでは

このような設定がされていたが、ここらは多分オブジェクトを利用で一発だろう。ということでやってみた。

基本はこれで大丈夫なようだ。
実際このように書くとoptionsがグローバル変数になってしまうので、関数の中にいれる。
ということで、以下が最終形

その他設定や例などはこちらがわかりやすい。