読者です 読者をやめる 読者になる 読者になる

コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

時刻の入力補助をするjQueryプラグイン

JavaScript jQuery

あけました、おめでとうございました。
今年もよろしくお願い致します。

さて、新年一発目はJavaScriptによる日付の入力補助プラグインの紹介です。
jQuery UIには日付を選択するdatepickerプラグインはありますが、時刻を選択するコンポーネントはありません。

Web画面において、時刻の入力は結構面倒なものです。最近のAndroidGoogleカレンダーの予定の登録では、以下のようなコンポーネントが使われています。

f:id:kuwalab:20140101084449p:plain

この画面はスマホやタブレットのタッチ可能な端末だとすごく選択がしやすいのですが、同じようなUIをPC上で作っても操作性がよくありません。

そこで、色々と探してみた中で個人的に一番使いやすかったjQuery UI Timepickerを紹介します。

紹介と言っても以下のページを見てくださいという程度のものです。

http://kuwalab.github.io/jQuery/Timepicker/index.html

datepickerとほとんど同じように使用でき、国際化もされていますので日本語で表示もできます。

実際に使ってもらうとわかるのですが、時間と分を両方選択すると自動でポップアップが閉じるのもいい感じです。

ということで、Timepickerでした。

jQueryクックブック

jQueryクックブック

広告