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

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

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

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

HTML5でも実装できる「DatePicker」

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

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

<input name="" type="date" value="" />

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

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

「flatpickr」を利用する

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

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

jQueryに依存しない

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

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

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

軽量である

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

インストール方法

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

npmによるインストール

npm i flatpickr –save

CDNによるインストール

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

設置方法

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

非jQueryの場合

<input id="calendar" type="text" />

<script>
flatpickr('#calendar');

jQueryの場合

<input id="calendar" type="text" />

<script>
$(function(){
	$('#calendar').flatpickr();
});
</script>

これで、「flatpickr」を利用した「DatePicker」を利用することができます。

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