このページの本文へ

「気が利くね」って言われたい!時刻入力系jQueryプラグイン10選

2016年04月19日 05時46分更新

文●Matt Burnett

  • この記事をはてなブックマークに追加
本文印刷

いま何時…? 今回紹介するのは、超クールな10個のjQuery時刻入力プラグインです。

日付やカレンダー入力のためのプラグインは巷にあふれていますが、時刻入力のプラグインはそう多くありません。さっそく見ていきましょう!

(追記:2016年3月24日時点で、古くて機能しない、または廃止予定のプラグインをリストから除外しました。現在のトレンドや水準に合わせてリストを更新し、いくつか新しいものも追加してあります)

1. jquery.timepicker

シンプルなデザインをお探しなら、Googleカレンダーからインスピレーションを受けた「jquery.timepicker」がおすすめです。しっかりとしたライブラリーで、簡単に時刻入力できるようにデザインされています。

01

Homepage/Demo | GitHub

2. Wickedpicker

Wickedpickerは数あるテーマの中でも、見た目が優れているプラグインです。究極にシンプルなインターフェイスで、Webサイトをより上品にしてくれます。

02

Homepage/Demo | GitHub

3. jQuery Timepicker

自由な表示形式で時間を入力できるだけでなく、プルダウンメニュー(訳注:原文はdropdown menu)から選ぶこともできます。最初に紹介したプラグインと同じ名前ですが、まったく違うプラグインなので混同しないように注意!

03

Homepage/Demo | GitHub

4. Bootstrap Material Datetimepicker

名前が紛らわしいですが、このプラグインにBootstrapは必要ありません! 元々はBoostrapのために作られたプラグインでしたが、いまはjQueryだけで利用できます。

04

Homepage/Demo | GitHub

5. jQuery UI Timepicker

他の公式jQuery UIのウィジェットと互換性のあるプラグインです。既存の日付入力プラグインをベースにして、選んだ表示形式をjQuery UIテーマにぴったりと合わせてくれます。表示形式と時間(時/秒)のインプットとを統合しやすいのが特徴です。

05

Homepage/Demo | GitHub

6. TimePicki

もう少しスタイリッシュにしたいなら、TimePicki がお勧めです。モダンな見た目でユーザーを惹きつけましょう!

06

Homepage/Demo | GitHub

7. jQueryTimeAutocomplete

jQueryTimeAutocompleteは、ただの時刻入力プラグインではありません。開発者が簡単に時間の間隔を選択できます。07

Homepage/Demo | GitHub

8. jQuery Time Entry

このプラグインではユーザーが自由に、いろいろな方法で時刻入力方法を変えることができます。マウスのスクロールで時刻の変更もできます!

08

Homepage/Demo | GitHub

9. ptTimeSelect

ユーザーの選んだ表示形式で時刻を設定できるUIを提供しているプラグインです。jQueryとDimensionsプラグインが必要です。

09

Homepage/Demo | Download

10. Timeago

Timeago自体は時刻入力プラグインではありません。分かりにくいタイムスタンプを自動でアップデートしてくれるのでとても使いやすいです(例:「4秒前」や「1日前」など)。

10

Homepage/Demo | GitHub

(原文:10 jQuery Time Picker Plugins

[翻訳:wasabi
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事