time-pickerライブラリ「jquery.timepicker」
シンプルなタイムピッカー「jquery.timepicker」にたどり着きました
(2018/11/26 更新) デモをCodePenで公開しました。
公式サイトはこちら
説明が英語なので、オプションの設定方法等が分かりづらかったのでメモ。
基本的な利用方法
予め、jQueryとjquery.timepickerを読み込みます
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/jonthornton/jquery-timepicker/3e0b283a/jquery.timepicker.min.css"> <script src="https://cdn.rawgit.com/jonthornton/jquery-timepicker/3e0b283a/jquery.timepicker.min.js"></script> |
その後は、inputタグにトリガーとなる任意のクラス名やID名を設定
|
1 |
<input type="text" class="lib-timepicker1"/> |
scriptでトリガーとなるクラス名等を設定し、timepickerを初期化
|
1 2 3 4 |
<script> //Library jquery-timepicker $('.lib-timepicker1').timepicker(); </script> |
以下の様にタイムピッカーを表示することができます。
See the Pen jquery.timepicker1 by s_fuji (@s_fuji) on CodePen.
オプション利用方法①
オプションは以下の様な形で定義します。
上から順に、①最小表示時刻 ②最大表示時刻 ③表示分数間隔
|
1 2 3 4 5 6 7 8 9 |
<input type="text" class="lib-timepicker2"/> <script> //Library jquery-timepicker $('.lib-timepicker2').timepicker({ 'minTime': '8:00', 'maxTime': '23:30', 'step': 15, }); </script> |
See the Pen jquery.timepicker2-option by s_fuji (@s_fuji) on CodePen.
オプション利用方法②
inputタグに属性を付けることで、表示形式を変えることができます。(data-time-format=”H:i”)
|
1 2 3 4 5 |
<input type="text" class="lib-timepicker3" data-time-format="H:i"/> <script> //Library jquery-timepicker $('.lib-timepicker3').timepicker(); </script> |
See the Pen jquery.timepicker3-option by s_fuji (@s_fuji) on CodePen.
オプション利用方法③
少し応用で、表示する時刻を現在時刻に近い時間にする方法です。
取得した時間を最小表示時刻としてセットしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<input type="text" class="lib-timepicker4" data-time-format="H:i"/> <script> //Library jquery-timepicker var d= new Date(); var hour = d.getHours(); $('.lib-timepicker4').timepicker({ 'minTime': ''+hour+':00', 'maxTime': '23:30', 'step': 15, }); </script> |
See the Pen jquery.timepicker4-option by s_fuji (@s_fuji) on CodePen.
最後まで読んでいただきありがとうございました^^
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント