こんにちは、ヱビス(@Evisu0414)です。
Webシステムを開発している時によく利用するのが、カレンダーによる日付のフォームです。
昔は、「」に直接入力してもらったり、プルダウンを3つ用意したりと利用者さんにとっても、開発者にとってもフレンドリーなUIではありませんでした。
今回はそんな「DatePicker(デートピッカー:カレンダー)」を簡単に実装できる「flatpickr」をご紹介します。
目次
HTML5でも実装できる「DatePicker」
「DatePicker(デートピッカー)」は、実はjavaScriptを使わずに、HTML5だけで実装ることも可能です。
HTML5のコードは、下記のとおりです。
1 |
<input name="" type="date" value="" > |
これだけで、「DatePicker」を利用することができます。
ですが、HTML5標準のものになるため、デザインのカスタマイズが難しく、サイトのデザインによっては、雰囲気に合わない場合もあります。
「flatpickr」を利用する
デザインやカスタマイズ性を考えると、JavaScript製のものは第1の候補として考えられます。
多くの種類がある中で「flatpickr」をご紹介するのには、ワケがあります。
jQueryに依存しない
「flatpickr」そのものが、jQueryとの依存関係がないため、単独で利用することができます。
そのため、余計なJSをインストールする必要もなく、手間がかかりません。
もちろん、jQueryを利用した記述方法も利用できます。
軽量である
jQueryに依存しないに関連しますが、他のプラグインのインストールが不要なので「flatpickr」そのものが軽量であるという点です。
インストール方法
インストール方法は、利用環境に応じて選ぶことができます。
npmによるインストール
npm i flatpickr –save
CDNによるインストール
1 |
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> |
設置方法
設置方法は、下記のとおりです。
非jQueryの場合
1 2 3 4 5 |
<input id="calendar" type="text" > <script> flatpickr('#calendar'); </script> |
jQueryの場合
1 2 3 4 5 6 7 |
<input id="calendar" type="text" > <script> $(function(){ $('#calendar').flatpickr(); }); </script> |
分かりやすいように、ソースコード(全文)を下記に用意します。
コメントを残す