時計のようなUIによる 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 として書く方法の2とおりあります。
<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 をクリックさせてやります。
システムでは24時間制を使うことが多いせいか、AM/PM の扱いはいまいちでした。