日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。
私も日頃Datepickerというライブラリを使っています。が、このプラグイン日付の入力はできても、時間の指定まではできません。
時間の指定ができるのが本日紹介するtimepickerというライブラリです。
下記のようにプルダウン形式で時間を選ぶことができます。
ソース
https://github.com/jonthornton/jquery-timepicker
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="../js/jquery.timepicker.js"></script> <link rel="stylesheet" type="text/css" href="../css/jquery.timepicker.css" /> <script> $(function() { //フォーマットの変更などはプロパティを書き換えることで柔軟にできます。 //詳しくは参考リンクを読んでみてください。 $('.timepicker').timepicker({ 'timeFormat': 'H:i' }); }); </script> ・・・・・・ <input type="text" class="timepicker" > |
jQuery以外には上記だけで読み込み可能()です。
小ネタ
inputのプロパティとしてreadonlyを有効にしているとライブラリが発動しないので気を付けましょう。 これで1時間ぐらい悩みました・・・
参考リンク
Googleカレンダー風に時間を入力「Timepicker for jQuery」 (←今回お世話になったリンクはこちら)
