時刻入力の入力補助として便利な「jQuery ClockPick」を使ってみる。
時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。
jQuery ClockPickで作る時刻入力
公式サイト
jNathanson.com | the interwebs home of josh nathanson
上記公式サイトを見ればすぐに使い方などは分かるのですが、せっかくなので使い方を紹介。
ダウンロードはグルーバルメニューの「Download」をクリックすればページ内リンクで移動しますので、そちらからダウンロード可能です。
このポストの時点でバージョンは 1.2.9 です。
設置方法
読み込み
ダウンロードしたjsファイルとcssファイルを指定。jQuery本体も忘れずに。
[html]
[/html]
フォーム用意
時刻を入力するフォームを用意。
clockpickで指定するIDを振ります。分かりやすく「From」としました。
[html]
[/html]
javascriptでフォームを指定
HTMLのヘッダに以下を記述。
午前9時から午後9時（21時）、30分刻みで指定してみました。
[html]
[/html]
動作イメージ
以上で画像のようなフォームが出来上がります。
オプション
用意されているオプションです。
starthour : 開始時（デフォルト：8）
endhour : 終了時（デフォルト：18）
showminutes : 分の表示（デフォルト：True）
minutedivisions : 分の刻み（デフォルト：4）→ 0,15,30,45
military : AM・PMの表示（デフォルト：False）→ Trueで非表示
event : 入力補助の表示方法（デフォルト：Click）→ クリックで表示
layout : 縦/横並びの指定（デフォルト：vertical）
valuefield : 不明（デフォルト：Null）
hoursopacity : 透明度（時）（デフォルト：1）→ 1でくっきり、0で消える
minutesopacity : 透明度（分）（デフォルト：1）→ 1でくっきり、0で消える
[tgAmazonItemLookup asin="B007R99SL4" related="1"]