日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

  • Posted on
  • Category : Tips
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。

以前だとデートピッカーといえば特にjQueryを使っている環境では「jQuery UI Datepicker」が定番という感じで、オプションが豊富なのでいろいろな機能・見せ方を実装できますし、ちょっとしたカスタマイズ情報なども検索でたくさん出てくることもあって使ったことあるという人も多いと思います。

ただ、今では同じくjQueryは使用するけどもっと軽量なものだったり、そもそもjQueryなどは使わず単体で動き、尚且つオプションが豊富でカスタマイズもしやすいスクリプトも多数公開されているので、備忘録もかねて良さそうなデートピッカー・タイムピッカー系のスクリプトをまとめてみました。

timedropper

timedropper

アクセス時にすぐ目に飛び込んでくるスマートフォンの中でデモが確認できますが、特徴的なUIのタイムピッカーを実装できるjQueryプラグインです。
数値を入力するタイプではなく、セレクタをクリック・タップしながら操作することで時刻が変化していくものになります。

jQuery Time Autocomplete

jQuery Time Autocomplete

時間を選択させるシンプルなドロップダウンを実装することができるjQueryプラグインで、ドロップダウンから選択だけでなく普通にテキストでも入力できるようになっています。
また、現在時刻の表示やフォーマット変更、時刻によってAMPMを自動で切り替えるといった機能も実装されています。

jQuery Timepicker

jQuery Timepicker

同じくシンプルなドロップダウンな見た目のタイムピッカーを実装できるjQueryプラグインです。
オプションは必要最低限なものは揃っている印象で、テキスト入力にも対応されています。
また、特徴的な機能のひとつとして、例えば「1656」と入力すると「04:56 PM」、「1:9 A」と入力すると「01:09 AM」といったように、入力した内容を変換してアウトプットしてくれるという機能もあります。

Timepicki v2.0

Timepicki v2.0

シンプル且つ軽量なのが特徴のタイムピッカーで、jQueryプラグインとなります。
デモを見ても分かるようにシンプルではありますが、使いそうなオプションはひと通り揃っている感じになっており、デモサイトの「Options」で各オプションの詳細と実際に適用した際の動きを確認できます。

jquery.timepicker

jquery.timepicker

同じくシンプル且つ軽量が特徴のタイムピッカーで、jQueryプラグインとなります。
見た目などもブラウザのデフォルトのものをそのまま使用している感じになっていますが、イベントトリガーや現在時刻の取得、フォーマット選択などオプションは複数用意されています。
また、「Datepair.js」というデートピッカーと組み合わせて使用する方法も併せて紹介されています。

flatpickr

flatpickr

jQueryやBootstrapなどは使わず、軽量なデートピッカーを作りたいという思いから作られたスクリプトです。
軽量且つ単体で動作するのが特徴で、デザインもシンプルなので使いやすいと思います。
また、簡易的なものではありますが、デザインテーマもいくつか用意されています。

Wickedpicker

Wickedpicker

jQueryプラグインのタイムピッカーです。
シンプル・軽量が特徴ではありますが、こちらのプラグインは直接テキストを入力ということはできず、表示されるフィールドを操作して設定するという感じなので注意です。

Bootstrap Material DatePicker

Bootstrap Material DatePicker

スクリプト名にあるようにBootstrapのために作成されたデートピッカーですが、なしでも使えるものになっています。
日付と時刻の両方の入力に対応しており、それぞれカレンダーと時計が表示されるようになっています。

Material-datetime-picker

Material-datetime-picker

上で紹介したものと同じような見栄えのデートピッカーで、こちらも日付はカレンダー、時刻は時計がそれぞれ表示されるようになっています。

mdPickers

mdPickers

マテリアルデザインのデート・タイムピッカーです。
実装のために「moment.js」「AngularJS」「Angular Material」といったものが必要になります。

Pikaday

Pikaday

シンプルなデートピッカーを実装できるスクリプトで、オプションはいろいろありますが軽量というのが特徴です。

DateTimePicker

DateTimePicker

日付と時刻の両方に対応しているデートピッカーで、jQueryプラグインになります。
デモを見ていただければわかるように様々な見せ方ができるようになっていて、オプションも豊富に揃っています。

Rome

Rome

日付と時刻の両方に対応してるデートピッカーです。
デモの見た目はシンプルですがオプションなどは豊富にあるので、カスタマイズ次第でいろいろな見せ方ができそうです。

Air Datepicker

Air Datepicker

どんなデザインにも合わせやすそうなシンプルなデザインのデートピッカーです。
デモの多くは日付を選択するものとなっていますが時刻の選択にも対応していて、オプションも豊富にあります。

Datepicker

Datepicker

シンプルなデートピッカーを実装できるjQueryプラグインとなっていますが、オプションやメソッドは豊富に用意されているので様々な実装ができそうです。
用意されているオプションやメソッドをいじったりできるような感じのデモ画面なので、簡易的な動きはそこでひと通り確認できます。

Back to Top

日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。