日付実装の決定版?DatePickerライブラリ「Flatpickr」の基本
こんにちは、ヱビス(@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」を利用することができます。
分かりやすいように、ソースコード(全文)を下記に用意します。