いま何時…? 今回紹介するのは、超クールな10個のjQuery時刻入力プラグインです。
日付やカレンダー入力のためのプラグインは巷にあふれていますが、時刻入力のプラグインはそう多くありません。さっそく見ていきましょう!
(追記:2016年3月24日時点で、古くて機能しない、または廃止予定のプラグインをリストから除外しました。現在のトレンドや水準に合わせてリストを更新し、いくつか新しいものも追加してあります)
1. jquery.timepicker
シンプルなデザインをお探しなら、Googleカレンダーからインスピレーションを受けた「jquery.timepicker」がおすすめです。しっかりとしたライブラリーで、簡単に時刻入力できるようにデザインされています。
2. Wickedpicker
Wickedpickerは数あるテーマの中でも、見た目が優れているプラグインです。究極にシンプルなインターフェイスで、Webサイトをより上品にしてくれます。
3. jQuery Timepicker
自由な表示形式で時間を入力できるだけでなく、プルダウンメニュー(訳注:原文はdropdown menu)から選ぶこともできます。最初に紹介したプラグインと同じ名前ですが、まったく違うプラグインなので混同しないように注意!
4. Bootstrap Material Datetimepicker
名前が紛らわしいですが、このプラグインにBootstrapは必要ありません! 元々はBoostrapのために作られたプラグインでしたが、いまはjQueryだけで利用できます。
5. jQuery UI Timepicker
他の公式jQuery UIのウィジェットと互換性のあるプラグインです。既存の日付入力プラグインをベースにして、選んだ表示形式をjQuery UIテーマにぴったりと合わせてくれます。表示形式と時間(時/秒)のインプットとを統合しやすいのが特徴です。
6. TimePicki
もう少しスタイリッシュにしたいなら、TimePicki がお勧めです。モダンな見た目でユーザーを惹きつけましょう!
7. jQueryTimeAutocomplete
jQueryTimeAutocompleteは、ただの時刻入力プラグインではありません。開発者が簡単に時間の間隔を選択できます。
8. jQuery Time Entry
このプラグインではユーザーが自由に、いろいろな方法で時刻入力方法を変えることができます。マウスのスクロールで時刻の変更もできます!
9. ptTimeSelect
ユーザーの選んだ表示形式で時刻を設定できるUIを提供しているプラグインです。jQueryとDimensionsプラグインが必要です。
10. Timeago
Timeago自体は時刻入力プラグインではありません。分かりにくいタイムスタンプを自動でアップデートしてくれるのでとても使いやすいです(例:「4秒前」や「1日前」など)。