カレンダーライブラリのflatpickrがすごくよかった件

カレンダーから日付を選択できるJavascriptライブラリであるdatepicker。

もっとも有名なところではjQuery UIを用いた「Datepicker」ですが、他にもたくさん種類があることはご存じでしょうか？

今回、軽量かつ簡単に実装できるflatpickrというライブラリを使ったところ、非常に使い勝手がよかったため紹介します。

flatpickrの良い点

IE9以上に対応している
軽いので読み込みが速い
オプションが豊富
シンプルなデザインに複数のテンプレート（配色）が用意されている

flatpickrの実装方法

flatpickrはブラウザからCDNで読み込みはもちろんのこと、各種パッケージマネージャにも対応しています。

自分の環境に合わせて導入してください。

1-1.npmの場合

npm i -D flatpickr

1-2. yarn の場合

yarn add flatpickr

1-3. bower の場合

bower install flatpickr-calendar --save

1-4. CDNで読み込む場合

<link rel="stylesheet" href="//unpkg.com/flatpickr/dist/flatpickr.min.css">
<!-- カスタムテーマ -->
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
<script src="//unpkg.com/flatpickr"></script>
<!-- 日本語の言語ファイル -->
<script src="//unpkg.com/flatpickr/dist/l10n/ja.js"></script>

flatpickrの導入ができたら、htmlにベースとなるインプットフォームを用意します。

2. インプットフォームを用意する

<input class="input" id="myCal" type="text" />

<script>
flatpickr("#myCal", {
  // 日本語化
  locale: "ja"
});
</script>

最もシンプルな形であればこれだけで動きます。

オプションの紹介

datepickrは土日は選択不可、前日までは選択不可など、便利なオプションが多数用意されています。

公式が用意しているオプションに限ればおそらくjQuery UI Datepickerより多く、使い勝手が良いです。

主なオプションを紹介します。

時間指定
表示用日付の指定
日付形式の指定
日付の初期値の指定
選択可能な日付の範囲の指定
特定の日付を無効にする
特定の期間を無効にする
特定の日付以外を無効にする
特定の曜日を無効にする
日付の複数選択（multiple）
時間の選択
インライン表示
日本語対応

実装方法は公式ドキュメントをご確認ください。

なお、有志が公式のドキュメントを翻訳してくれています。

どうしても英語がいいんじゃーという方以外は感謝しながら翻訳ドキュメントを参照してください。

テーマの紹介

flatpickrの良い点として、複数のカラーテーマが用意されているので、カラーテーマのCSSさえ読み込めば自分のプロダクトに合わせたデザインを手軽に自走できることがあげられます。

テーマはこちらから確認できます。

このように、flatpickrはjQuery UIにとって代われるものだと思います。

何より、jQueryのバージョンに依存せずに使えるので、カレンダーを入れることになったら真っ先に候補に挙げるべきライブラリだとおすすめできます。

みなさんもよいdatepickrライフ（？）をお楽しみください。