[jQuery] 時刻をカンタンに入力できるライブラリ「ClockPick」が便利!
時刻をカンタンに入力できる jQuery ライブラリ「ClockPick」が便利だったので、使い方をメモ。
・jNathanson.com | the interwebs home of josh nathanson
■ js/css ファイルの設置
上記、サイトから「jquery.clockpick.1.2.9.min.js」と「clockpick.1.2.9.css」をダウンロードして、設置します。
■ CSS ファイルの書き換え
デフォルトだとフォントサイズが 9px と小さくて見にくいので、18pxに変更します。
.CP_hour と .CP_minute でフォントサイズを指定してる箇所をそれぞれ変更。
■ JavaScript
よく使う 24時間表記、5分刻みで選択できるような設定にしました。
<script type="text/javascript"> $(function(){ $("#start_time").clockpick({ starthour: 0, endhour: 23, showminutes: true, minutedivisions: 12, military: true }); }); </script> |
■ HTMLソース
<input type="text" name="start_time" id="start_time" /> |
■ オプション
・starthour:開始時間(デフォ8)
・endhour:終了時間(デフォ18)
・showminutes:分の表示(デフォTrue、False)
・minutedivisions:分の刻み(デフォ4)
・military:AM/PMの表記(デフォFalse、True)
・event:時間の出し方(デフォClick、Mouseover)
・layout:時間の表示方法(デフォvertical、Horizontal)
以上です。
【参考】
・時間の入力支援javascript「ClockPick」|skuare.net