WEB制作の仕事をしていると、お客さんからの依頼でデートピッカー（日付選択用カレンダー）を利用することが良くあります。
一番有名なのは、jQuery UI Datepickerですが、
他にも多くのライブラリーが存在するので、正直、どれを使うか迷ってしまいます。
そんな場合には、
私はお客さんに、いくつかの候補から選んで貰うのが一番手っ取り早いと思うので、
この機会に、使えそうなデートピッカーをいくつか集めてみました。
コンテンツ
jQuery UI Datepicker
まず、デートピッカーと言えば、jQuery UI Datepickerですね。
デフォルトのカレンダーはシンプルなものですが、
テーマを変えるることで、カラーデザインを変更することも出来ます。
jQueryの拡張ライブラリーということもあり、情報量も多いので、設定するのは難しくないと思います。
Air Datepicker
シンプルなデザインのデートピッカーで、どのようなサイトにも合わせやすいです。
日付の範囲を指定することも可能です。
Chrome、Firefox、IE 10以上、Safari 8以上、Opera 17以上で動作します。
flatpickr
こちらも、シンプルな見た目のデートピッカーで、
日付選択だけではなく、タイムピッカー（時間選択用のカレンダー）も追加可能です。
Chrome、Firefox、IE 10以上、Safari 6以上で動作します。
IE9でも動作させる場合には、以下を参照して下さい。
https://flatpickr.js.org/ie9/
設置方法の詳細は、以下のページでまとめています。
flatpickr 設置方法
pickadate.js
画面下から日付選択用のカレンダーが上がってくる動きのあるカレンダーで、
かっこいいデートピッカーをお探しの方におすすめです。
タイムピッカーも追加可能で、人気のデートピッカーライブラリーになっています。
【デートピッカー】
【タイムピッカー】
モダンブラウザとIE8以上に対応しています。
設置方法の詳細は、以下のページでまとめています。
pickadate.js 設置方法
mdPickers
AngularJSのライブラリーで、こちらも、デートピッカーとタイムピッカーを実装できます。
Angular Datepicker
こちらも、AngularJSのデートピッカーです。
シンプルなUIで、使い易いデートピッカーになっています。
Bootstrap Material DatePicker
Bootstrapというフレームワーク用に作成されたデートピッカーで、タイムピッカーも実装できます。
因みに、Bootstrapフレームワークが無くても、動作します。
Bootstrap Material DatePicker デモ
ライブラリーは、GitHubからダウンロードできます。
設置方法の詳細は、以下のページでもまとめています。
Bootstrap Material DatePicker 設置方法
この記事へのコメントはありません。