時計のUIによるTime picker

時計のようなUIによる Time picker を探してたら github にありました。
https://github.com/weareoutman/clockpicker
f:id:posturan:20171212173730j:plain

github サイトから入手した CSS と JS を使います。

<link rel="stylesheet" type="text/css" href="dist/jquery-clockpicker.min.css">
<script type="text/javascript" src="dist/jquery-clockpicker.min.js"></script>

まずは、標準的なもの。

<style type="text/css">
.clockpicker input{  width: 40px; }
</style>
<div class="clockpicker">
	Time1:<input id="time1" type="text" value="09:30">
</div>

適用ボタンテキストは、donetext オプションで指定します。

$('#time1').clockpicker({
    donetext: "Done",
});

適用ボタンを無くして、分をクリックした時に自動的にセットして閉じるのは、
autoclose というオプションですが、これはタグに書く方法と、option として書く方法の2とおりあります。
f:id:posturan:20171212174813j:plain

<div class="clockpicker">
	Time2:<input id="time2" type="text" data-autoclose="true">
</div>

data-autoclose="true" で指定する場合、

$('#time2').clockpicker();

オプションで指定する場合、

$('#time2').clockpicker({
      autoclose: true,
});

また、デフォルトを現在時刻にする場合、

$('#time2').clockpicker({
      autoclose: true,
     'default': 'now',
});

AM/PM を付ける場合、twelvehour というオプションを true にすれば良いのですが、
注意が必要です。
f:id:posturan:20171212180030j:plain
現在時刻、あるいは既に入力してある時刻による AM/PM を指定させるには、
afterShow オプションで描画後に、AM or PM ボタンを押下と同じ処理をしないと
AM/PM の表示になりません。
次は、現在時刻に対する picker の記述です。

$('#time2').clockpicker({
     twelvehour: true,
     'default': 'now',
     autoclose: true,
     afterShow: function(){
          var d = new Date();
          if (d.getHours() > 12){
               $("button.pm-button").trigger("click");
          }else{
                $("button.am-button").trigger("click");
          }
      },
});

button.pm-button をクリックさせてやります。

システムでは24時間制を使うことが多いせいか、AM/PM の扱いはいまいちでした。