Bootstrapの良いところとして、十分に普及したこともあって色々な人たちがUIコンポーネントを作成しているというのがあります。標準で提供されるHTMLコンポーネントだけでなく、よりリッチな入力インタフェースが実現できます。 ということで今回はClockPickerの紹介です。カレンダー指定によって日付入力は分かりやすくなりましたが、ClockPickerによってさらに時間入力を分かりやすくできます。

ClockPickerの使い方

入力ボックスです。クリックします。

まず最初に時間を指定します。24時間対応です。

表示が変わって次に時間を入力します。完成を押して完了です。

現在時刻を表示できます。

ClockPickerは日付同様に専用のフォーマットである時刻入力を数字を入力することなく簡単にできるようにします。細かな時間入力には向かないかも知れませんが、スケジュールなど5分単位の入力の場合は便利そうです。PCはもちろん、スマートフォンで活躍しそうです。コールバックなども備えていますのでシステムとの連携も容易です。

ClockPickerはHTML5/JavaScriptのオープンソース・ソフトウェア(MIT License)です。

ClockPicker weareoutman/clockpicker