時計のようなＵＩによる Time picker を探してたら github にありました。
https://github.com/weareoutman/clockpicker
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 として書く方法の２とおりあります。
<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 にすれば良いのですが、
注意が必要です。
現在時刻、あるいは既に入力してある時刻による 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 をクリックさせてやります。
システムでは２４時間制を使うことが多いせいか、AM/PM の扱いはいまいちでした。
