The Flatpickr Instance

インスタンス生成

呼び出し結果をインスタンスとして変数に格納することができます。いくつかの例を以下に表記します。

1.セレクタを使う方法

const fp = flatpickr("#myID", {}); // flatpickr

2.Elementオブジェクトを渡す方法

const myInput = document.querySelector(".myInput");
const fp = new flatpickr(myInput, {});  // flatpickr

3.セレクタを使って生成し、要素番号でアクセス

const calendars = flatpickr(".calendar", {});
calendars[0] // flatpickr

4.変数に格納していない場合

flatpickr("#myInput", {}); // 変数に格納しない
// ...

const fp = document.querySelector("#myInput")._flatpickr;

プロパティ

もしインスタンスをfpという変数に格納した場合、 プロパティはfp.currentYearでアクセスできます。

selectedDates

選択した日付のオブジェクト(Dateオブジェクト)を取得します。

デモ

onChangeをトリガーとしてselectedDatesを表示します。

onChangeは引数としてselectedDatesを受け取ることもできます。

JavaScript

const config = {
  onChange: function() {
    document.getElementById('selectedDatesDisp').innerHTML = this.selectedDates;
  }
}
let fp = flatpickr('.flatpickr', config);

HTML

<span id="selectedDatesDisp">[ここに選択した日付が表示されます]</span>
<br>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

currentYear

現在表示中のカレンダーの「年」を取得します。

デモ

日付を選択するとonChangeをトリガーとしてcurrentYearを表示します。

JavaScript

const config = {
  onChange: function() {
    document.getElementById('dispCurrentYear').innerHTML = currentYear;
  }
}
let fp = flatpickr('.flatpickr', config);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<br>
<span id="selectedDatesDisp">[ここに選択した日付が表示されます]</span>

currentMonth

現在表示中のカレンダーの「月」(0～11)を取得します。

デモ

日付を選択するとonChangeをトリガーとしてcurrentMonthを表示します。

JavaScript

const config = {
  onChange: function() {
    document.getElementById('dispCurrentMonth').innerHTML = currentMonth;
  }
}
let fp = flatpickr('.flatpickr', config);

HTML

<span id="dispCurrentMonth">[ここに選択した月(0～11)が表示されます]</span>
<br>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

config

設定オブジェクト(デフォルト + 個別に指定した設定)を取得します。

デモ

カレンダーを開くとonOpenをトリガーとして現在設定中のconfigを表示します。

JavaScript

const config = {
  onOpen: function() {
    document.getElementById('dispConfig').innerHTML = config;
  }
}
let fp = flatpickr('.flatpickr', config);

HTML

<span id="dispConfig">[ここに設定中のconfig Objが表示されます]</span>
<br>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

メソッド

changeMonth(monthNum, is_offset = true)

現在の月を変更します。

JavaScript

let calendar = new flatpickr(yourElement, config);
calendar.changeMonth(1); // 1月進める
calendar.changeMonth(-2); // 2月戻す

calendar.changeMonth(0, false); // 1月に設定する

clear()

選択した日付をクリアします。

デモ

クリアボタンをクリックすると、選択された日付が空になります。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('clearDate').addEventListener('click', fp.clear, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<input type="button" id="clearDate" value="クリア">

close()

カレンダーを閉じます。

デモ

カレンダーを表示した状態で閉じるボックスをマウスオーバーすると、カレンダーが閉じます。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('closeCalendar').addEventListener('mouseover', function() {
  fp.close();
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<span id="closeCalendar">閉じる</span>

destroy()

インスタンスを破棄します。イベントリスナーを削除したり、 inputタグを初期状態に戻すといった処理を行います。

デモ

破棄ボタンをクリックすると、flatpickrのインスタンスが破棄され、 テキストボックスをクリックしてもカレンダーが表示されなくなります。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('destroyFp').addEventListener('click', function() {
  fp.destroy(fp);
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<input type="button" id="destroyFp" value="破棄">

formatDate(dateObj, formatStr)

日付書式を指定します。dateObjはDateオブジェクトです。 formatStrは日付フォーマットです。

戻り値：formatStrでフォーマットされた日付文字列が返ります。

デモ

変換ボタンをクリックすると、選択された日付をd.m.Y形式で変換し、表示します。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('formatDate').addEventListener('click', function() {
  document.getElementById('formatDateDisp').innerHTML = fp.formatDate(fp.selectedDates[0], 'd.m.Y');
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<input type="button" id="formatDate" value="変換">
<br>
<span id="formatDateDisp">[ここに変換後の日付が表示されます]</span>

jumpToDate(date, triggerChange)

表示中のカレンダーを指定した日付の年、月に変更します。 日付形式、Dateオブジェクトを指定、または未指定にすることができます。

未指定の場合、「最後に選択した日付」、または「今日」のいずれかになります。 今日がminDate、maxDateの範囲外の場合は、一番近い年月になります。

triggerChangeにtrueが指定されている場合、 値が変更された場合に限りonMonthChangeとonYearChangeがトリガーされます。

デモ

2015-01をマウスオーバーすると、2015年1月のカレンダーを表示します。

JavaScript

const config = {
  defaultDate: 'today',
  inline: 'true',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('jumpToDate').addEventListener('mouseover', function() {
  fp.jumpToDate('2015-01');
}, false);

HTML

<span id="jumpToDate">2015-01</span>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

open()

カレンダーを表示します。

デモ

開くボックスをマウスオーバーすると、カレンダーを表示します。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('openCalendar').addEventListener('mouseover', function() {
  fp.open();
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<span id="openCalendar">開く</span>

parseDate(date, dateFormat)

日付または、タイムスタンプからDate Objを返します。

デモ

「変換」ボタンを押すと、タイムスタンプを取得しDate Objを表示します。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('parseDate').addEventListener('click', function() {
  document.getElementById('parseDateDisp').innerHTML = fp.parseDate(Date.now());
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<input type="button" id="parseDate" value="変換">
<br>
<span id="parseDateDisp">[ここに変換後の日付が表示されます]</span>

redraw()

カレンダーを再描画します。ほぼ使うことは無いでしょう。

set(option, value)

カレンダーに設定されているoptionをvalueに書き換えます。 必要に応じてカレンダーを再描画します。

デモ

モード変更ボックスをマウスオーバーすると、日付選択モードが範囲選択モードになります。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('fp_set').addEventListener('mouseover', function() {
  fp.set('mode', 'range');
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<span id="fp_set">モード変更</span>

setDate(date, triggerChange, dateStrFormat)

日付を指定したdateに変更します。日付文字列、日付、日付の配列を指定することができます。
必要に応じて、triggerChangeにtrueを指定することで、onChangeを発火させることができます。 また、dateFormat意外の書式で日付を渡す場合はdateStrFormatに"m/d/Y"というように日付書式指定を指定します。

デモ

変更ボックスをマウスオーバーすると、日付が2015-01-01に変更され、 onChangeで指定した処理によって、2015-01-01のDate Objが表示されます。

JavaScript

const config = {
  defaultDate: 'today',
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById('setDateDisp').innerHTML = selectedDates;
  },
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('setDate').addEventListener('mouseover', function() {
  fp_sd.setDate('2015-01-01', true);
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<span id="setDate">変更</span>
<br>
<span id="setDateDisp">[ここに変更後の日付が表示されます]</span>

toggle()

カレンダーを表示/非表示を切替えます。

デモ

表示/非表示ボックスをマウスオーバーすると、カレンダーの表示/非表示を切替えます。

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('toggleCalendar').addEventListener('mouseover', function() {
  fp.toggle();
}, false);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
<span id="toggleCalendar">表示/非表示</span>

要素

input

flatpickrに関連付けられたinput要素です。

calendarContainer

説明するまでもありませんが、カレンダーそのものです。 この要素はdiv.flatpickr-calendarです。

prevMonthNav

前月を表示するナビゲーションカーソルです。

nextMonthNav

次月を表示するナビゲーションカーソルです。

currentMonthElement

現在の「月」を保持しているspan要素です。

currentYearElement

現在の「年」を保持したinput要素です。

days

全ての「日」の要素です。

デモ

テキストボックスをクリックすると、カレンダーヘッダーの内容を、以下のように書き換えます。

• <を「前月」
• >を「来月」
• 月表示を「今月」
• 年表示を「今年」

JavaScript

const config = {
  defaultDate: 'today',
}
let fp = flatpickr('.flatpickr', config);
document.getElementById('flatpickr').addEventListener('DOMFocusIn', function() {
  fp.prevMonthNav.innerHTML = '前月';
  fp.nextMonthNav.innerHTML = '来月';
  fp.currentMonthElement.innerHTML = '今月';
  fp.currentYearElement.value = '今年';
}, false);

HTML

<input class="fp_elem" id="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

便利なstaticメソッド

flatpickrではインスタンス生成せずに日付フォーマッタを利用することができます。

moment.jsほど多機能ではありませんが、ほとんどの場合において必要十分な機能を持っています。

flatpickr.parseDate(dateStr, dateFormat)

Dateオブジェクトを返します。

デモ

JavaScript

let date = flatpickr.parseDate("2016-10-20", "Y-m-d");
document.getElementById('disp_date').innerHTML = date;

HTML

<p id="disp_date"></p>

JavaScript

let date = flatpickr.parseDate("31/01/1995", "d/m/Y");
document.getElementById('disp_date').innerHTML = date;

HTML

<p id="disp_date"></p>

flatpickr.formatDate(dateObj, dateFormat)

Dateオブジェクトを日付形式に変換します。

デモ

JavaScript

let date = flatpickr.formatDate(new Date(), "Y-m-d h:i K");
document.getElementById('disp_date').innerHTML = date;

HTML

<p id="disp_date"></p>