日付実装の決定版？DatePickerライブラリ「Flatpickr」の基本

こんにちは、ヱビス（@Evisu0414）です。

Webシステムを開発している時によく利用するのが、カレンダーによる日付のフォームです。

昔は、「」に直接入力してもらったり、プルダウンを3つ用意したりと利用者さんにとっても、開発者にとってもフレンドリーなUIではありませんでした。

今回はそんな「DatePicker（デートピッカー：カレンダー）」を簡単に実装できる「flatpickr」をご紹介します。

HTML5でも実装できる「DatePicker」

「DatePicker（デートピッカー）」は、実はjavaScriptを使わずに、HTML5だけで実装ることも可能です。

HTML5のコードは、下記のとおりです。

これだけで、「DatePicker」を利用することができます。

ですが、HTML5標準のものになるため、デザインのカスタマイズが難しく、サイトのデザインによっては、雰囲気に合わない場合もあります。

「flatpickr」を利用する

デザインやカスタマイズ性を考えると、JavaScript製のものは第1の候補として考えられます。

多くの種類がある中で「flatpickr」をご紹介するのには、ワケがあります。

jQueryに依存しない

「flatpickr」そのものが、jQueryとの依存関係がないため、単独で利用することができます。

そのため、余計なJSをインストールする必要もなく、手間がかかりません。

もちろん、jQueryを利用した記述方法も利用できます。

軽量である

jQueryに依存しないに関連しますが、他のプラグインのインストールが不要なので「flatpickr」そのものが軽量であるという点です。

インストール方法

インストール方法は、利用環境に応じて選ぶことができます。

npmによるインストール

npm i flatpickr –save

CDNによるインストール

設置方法

設置方法は、下記のとおりです。

非jQueryの場合

jQueryの場合

分かりやすいように、ソースコード（全文）を下記に用意します。