flatpickrを使ってみる

フォームの入力でカレンダーから日付を選択させたいことがあったので、datepicker系ライブラリのflatpickrを使ってみました。

導入

まずは簡単な設置を試してみます。
詳しくは公式のGetting Startedをご確認ください。

flatpickrをインストールします。
今回はCDNから読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

カレンダーを表示するinput要素を用意します。

<input type="text" id="sample">

ライブラリの設定を行います。

var sample = document.getElementById('sample');
var fp = flatpickr(sample);

これでカレンダーの表示ができました。
カレンダー表示のデモページ

inputに入力される日付のフォーマットの変更もできます。

var sample = document.getElementById('sample');
var fp = flatpickr(sample, {
	dateFormat: 'Y-n-j(l)' // フォーマットの変更
});

フォーマット変更のデモページ
フォーマットについて詳しくは公式のドキュメントをご確認ください。

オプション

公式ドキュメントのオプションの項目を参考に、オプションの設定をいくつか試してみます。

イベント

詳しくは公式ドキュメントをご確認ください。
イベントのデモページ

イベントは最初のライブラリ設定時だけでなく、配列にプッシュする形で後から設定することもできるようです。
デモページ

プロパティ・メソッド・エレメント

詳しくは公式ドキュメントをご確認ください。

プロパティ

プロパティのデモページ

メソッド

メソッドのデモページ

エレメント

エレメントのデモページ