time-pickerライブラリ「jquery.timepicker」



シンプルなタイムピッカー「jquery.timepicker」にたどり着きました

(2018/11/26 更新) デモをCodePenで公開しました。

 

公式サイトはこちら
説明が英語なので、オプションの設定方法等が分かりづらかったのでメモ。

 

基本的な利用方法

予め、jQueryとjquery.timepickerを読み込みます

その後は、inputタグにトリガーとなる任意のクラス名やID名を設定

scriptでトリガーとなるクラス名等を設定し、timepickerを初期化

 

以下の様にタイムピッカーを表示することができます。

See the Pen jquery.timepicker1 by s_fuji (@s_fuji) on CodePen.

 

オプション利用方法①

オプションは以下の様な形で定義します。
上から順に、①最小表示時刻 ②最大表示時刻 ③表示分数間隔

See the Pen jquery.timepicker2-option by s_fuji (@s_fuji) on CodePen.

 

オプション利用方法②

inputタグに属性を付けることで、表示形式を変えることができます。(data-time-format=”H:i”)

See the Pen jquery.timepicker3-option by s_fuji (@s_fuji) on CodePen.

 

オプション利用方法③

少し応用で、表示する時刻を現在時刻に近い時間にする方法です。
取得した時間を最小表示時刻としてセットしています。

See the Pen jquery.timepicker4-option by s_fuji (@s_fuji) on CodePen.

 

最後まで読んでいただきありがとうございました^^

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL