サイト制作に関するメモ書き

HOME > JavaScript > flatpickrを使ってみる

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)' // フォーマットの変更
});

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

オプション

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

altInput 元の入力フィールドを非表示にして、表示用の入力フィールドを作成するかどうかを設定。
フォームで送信するvalueと表示されるvalueを別に設定したいときに使用。
初期値はfalse。
デモページ
altFormat altInputのフォーマットを設定。
初期値は”F j, Y”。
デモページ
altInputClass altInputに設定するclass名を設定。
初期値は””。
デモページ
allowInput ユーザーが直接日付を入力できるようにするかどうかを設定。
初期値はfalse。
デモページ
appendTo カレンダーを挿入する要素を設定。
初期値はnull。
デモページ
ariaDateFormat カレンダーの日付部分のaria-labelのフォーマットを設定。
初期値は”F j, Y”。
デモページ
conjunction modeがmultipleの場合の区切り文字を設定。
初期値はnull。
デモページ
clickOpens inputをクリックしてカレンダーを開くかどうかを設定。
初期値はtrue。
デモページ
dateFormat 入力エリアの日付のフォーマットを設定。
初期値は”Y-m-d”。
デモページ
defaultDate 日付の初期値を設定。
初期値はnull。
デモページ
defaultHour 時間指定の初期値を設定。
初期値は12。
デモページ
defaultMinute 分指定の初期値を設定。
初期値は0。
デモページ
disable カレンダーで無効にする日付を設定。
初期値は[]。
デモページ
disableMobile モバイルでネイティブの日時ウィジェットを使わないかどうかを設定。
初期値はfalse。
デモページ
enable カレンダーで有効にする日付を設定。
初期値は。
デモページ
enableTime 時間の指定を有効にするかどうかを設定。
初期値はfalse。
デモページ
enableSeconds 時間の指定で秒を有効にするかどうかを設定。
初期値はfalse。
デモページ
hourIncrement 時間入力のステップを設定。
初期値は1。
デモページ
inline カレンダーをインラインで表示するかどうかを設定。
初期値はfalse。
デモページ
maxDate カレンダーで選択できる最大の日付を設定。
初期値はnull。
デモページ
minDate カレンダーで選択できる最小の日付を設定。
初期値はnull。
デモページ
minuteIncrement 分入力のステップを設定。
初期値は5。
デモページ
mode カレンダーの選択形式を指定。
初期値は”single”。
single: 1つのみ選択。
multiple: 複数選択。デモページ
range: 範囲選択。デモページ
nextArrow 翌月に切り替える矢印アイコンのHTMLを指定。
初期値は>。
デモページ
noCalendar カレンダーの日付選択を非表示にするかどうかを設定。
enableTimeと合わせて設定して、時間のみ選択したい場合に使用。
デモページ
position カレンダーの表示位置を設定。
初期値は”auto”。
デモページ
positionElement カレンダーを表示する要素を設定。
初期値はnull。
デモページ
prevArrow 前月に切り替える矢印アイコンのHTMLを設定。
初期値は<。
デモページ
shorthandCurrentMonth 月を省略形で表示するかどうかを設定。
初期値はfalse。
デモページ
showMonths カレンダーに表示する月の数を設定。
初期値は1。
デモページ
static inputをラッパーで括って、inputの隣にカレンダーを配置するかを設定。
初期値はfalse。
デモページ
time_24hr 時間指定の際に24時間表記にするかどうかを設定。
初期値はfalse。
デモページ
weekNumbers 週番号を表示するかどうかを設定。
初期値はfalse。
デモページ
monthSelectorType カレンダーのヘッダーにつきを表示する方法を設定。
初期値は”dropdown”。
dropdown: ドロップダウンで表示。
static: 静的に表示。デモページ

イベント

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

onChange ユーザーが日付を選択・変更した時に発火。
onOpen カレンダーが開かれたときに発火。
onClose カレンダーが閉じられたときに発火。
onMonthChange カレンダーの月が変更されたときに発火。
onYearChange カレンダーの年が変更されたときに発火。
onReady カレンダーの準備完了時に発火。
onValueUpdate inputの値が更新されたときに発火。
onDayCreate カレンダー内の日付を生成したときに発火。
生成時にまとめてではなく、日付単位で発火する。

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

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

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

プロパティ

プロパティのデモページ

selectedDates 選択した日付の配列を返す。
currentYear 現在のカレンダーの年を返す。
currentMonth 現在のカレンダーの月を返す。
config 設定のオブジェクトを返す。

メソッド

メソッドのデモページ

changeMonth(monthNum, is_offset) 指定した値だけカレンダーの月を移動。
第二引数をfalseにした場合、指定した値の月に移動。
clear() 選択した日付をクリアする。
close() カレンダーを閉じる。
destroy() flatpickrインスタンスを破棄する。
formatDate(dateObj, formatStr) 日付を指定した形にフォーマットする。
jumpToDate(date, triggerChange) 指定した日付にカレンダーの年月を移動する。
open() カレンダーを開く。
parseDate(dateStr, dateFormat) 日付の文字列をDateオブジェクトに変換する。
toggle() カレンダーが閉じている場合は開き、開いている場合は閉じる。

エレメント

エレメントのデモページ

input テキスト入力要素を返す。
calendarContainer カレンダー要素を返す。
prevMonthNav 前月に戻る矢印の要素を返す。
nextMonthNav 翌月に進む矢印の要素を返す。
days カレンダーの日付要素を返す。

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP