[jQuery] 時刻をカンタンに入力できるライブラリ「ClockPick」が便利!

時刻をカンタンに入力できる jQuery ライブラリ「ClockPick」が便利だったので、使い方をメモ。

jNathanson.com | the interwebs home of josh nathanson はてなブックマーク - 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 はてなブックマーク - 時間の入力支援javascript「ClockPick」|skuare.net