flatpickr - にほんご。

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

[ここに選択した日付が表示されます]

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="dispCurrentYear">[ここに選択した年が表示されます]</span>

[ここに選択した年が表示されます]

currentMonth

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

デモ

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

JavaScript
const config = {
  onChange: function() {
    document.getElementById('dispCurrentMonth').innerHTML = currentMonth;
  }
}
let fp = flatpickr('.flatpickr', config);
HTML
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly"><br>
<span id="dispCurrentMonth">[ここに選択した月(0~11)が表示されます]</span>

[ここに選択した月(0~11)が表示されます]

config

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

デモ

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

JavaScript
const config = {
  onOpen: function() {
    document.getElementById('dispConfig').innerHTML = config;
  }
}
let fp = flatpickr('.flatpickr', config);
HTML
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly"><br>
<span id="dispConfig">[ここに設定中のconfig Objが表示されます]</span>

[ここに設定中のconfig Objが表示されます]

メソッド

changeMonth(monthNum, is_offset = true)

現在の月を変更します。

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(formatStr, dateObj)

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

戻り値: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('d.m.Y', fp.selectedDates[0]);
}, 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)

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

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

デモ

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">
2015-01

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)

日付または、タイムスタンプから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">
<span id="openCalendar">開く</span>

[ここに変換後の日付が表示されます]

redraw()

カレンダーを再描画します。ほぼ使いません。とのこと。

set(option, value)

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

デモ

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

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に変更します。日付文字列、日付、日付の配列を指定することができます。
必要に応じて、triggerChangetrueを指定することで、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><br>
変更
[ここに変更後の日付が表示されます]

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 id="flatpickr" class="fp_elem" 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>

© 2017 Gregory Petrosyan Released under the MIT license

このコンテンツはGregory Petrosyan(chmln)によるflatpickrドキュメントを翻訳/改変したものです。