JavaScript

Javascript おすすめのデートピッカー(日付選択ライブラリー)

WEB制作の仕事をしていると、お客さんからの依頼でデートピッカー(日付選択用カレンダー)を利用することが良くあります。

一番有名なのは、jQuery UI Datepickerですが、
他にも多くのライブラリーが存在するので、正直、どれを使うか迷ってしまいます。

そんな場合には、
私はお客さんに、いくつかの候補から選んで貰うのが一番手っ取り早いと思うので、
この機会に、使えそうなデートピッカーをいくつか集めてみました。

jQuery UI Datepicker

まず、デートピッカーと言えば、jQuery UI Datepickerですね。

jQuery UI Datepicker

デフォルトのカレンダーはシンプルなものですが、
テーマを変えるることで、カラーデザインを変更することも出来ます。

jQueryの拡張ライブラリーということもあり、情報量も多いので、設定するのは難しくないと思います。

jQuery UI Datepicker デモ

 

Air Datepicker

シンプルなデザインのデートピッカーで、どのようなサイトにも合わせやすいです。

Air Datepicker

日付の範囲を指定することも可能です。
Air Datepicker 範囲指定

Chrome、Firefox、IE 10以上、Safari 8以上、Opera 17以上で動作します。

Air Datepicker デモ

 

flatpickr

こちらも、シンプルな見た目のデートピッカーで、
日付選択だけではなく、タイムピッカー(時間選択用のカレンダー)も追加可能です。

【デートピッカー】
flatpickr デートピッカー
【タイムピッカー】
flatpickr タイムピッカー

Chrome、Firefox、IE 10以上、Safari 6以上で動作します。
IE9でも動作させる場合には、以下を参照して下さい。
https://flatpickr.js.org/ie9/

flatpickr デモ

設置方法の詳細は、以下のページでまとめています。
flatpickr 設置方法

 

pickadate.js

画面下から日付選択用のカレンダーが上がってくる動きのあるカレンダーで、
かっこいいデートピッカーをお探しの方におすすめです。

タイムピッカーも追加可能で、人気のデートピッカーライブラリーになっています。

【デートピッカー】
pickadate.js デートピッカー
【タイムピッカー】
pickadate.js タイムピッカー

モダンブラウザとIE8以上に対応しています。

pickadate.js デモ

設置方法の詳細は、以下のページでまとめています。
pickadate.js 設置方法

 

mdPickers

AngularJSのライブラリーで、こちらも、デートピッカータイムピッカーを実装できます。

【デートピッカー】
mdPickers デートピッカー
【タイムピッカー】
mdPickers タイムピッカー

mdPickers デモ

 

Angular Datepicker

こちらも、AngularJSのデートピッカーです。
Angular Datepicker

シンプルなUIで、使い易いデートピッカーになっています。

Angular Datepicker デモ

 

Bootstrap Material DatePicker

Bootstrapというフレームワーク用に作成されたデートピッカーで、タイムピッカーも実装できます。
因みに、Bootstrapフレームワークが無くても、動作します。

【デートピッカー】
Bootstrap Material DatePicker デートピッカー
【タイムピッカー】
Bootstrap Material DatePicker タイムピッカー

Bootstrap Material DatePicker デモ

ライブラリーは、GitHubからダウンロードできます。

設置方法の詳細は、以下のページでもまとめています。
Bootstrap Material DatePicker 設置方法

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. WP:WordPress(ワードプレス)
  2. WP:WordPress(ワードプレス)
  3. WP:WordPress(ワードプレス)
  4. SNSシェア
  5. 開始
  6. コーディング
  7. WP:WordPress(ワードプレス)
  8. WP:WordPress(ワードプレス)
  9. Linux(リナックス)
  10. HTMLコーディング

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • 昨日、オープンしたばかりの北村写真機店に行ってきました。結構混んでいたので、店内をさっと回って出てきたのですが、ニコンのz6が中古15万くらいだったので思わず買ってしまいそうに。 今気になっている機種があるので、コロナが落ち着いた… twitter.com/i/web/status/1…
    about 14時間 ago via Twitter Web App

アーカイブ

PAGE TOP