tobijibu

The Flatpickr Instance

【お知らせ】 この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[flatpickr - Japanese] - http://tr.you84815.space/flatpickr/
上記サイトは随時更新していきますので、今後とも、宜しくお願い致します。





インスタンス生成

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

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オブジェクトを指定、または未定義にすることができます。

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

サンプル

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)

カレンダーに設定されている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><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">

便利なプロトタイプメソッド

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

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

※もともとメソッド名はFlatpickrでしたが、FlatpickrInstanceに変わったようです。

FlatpickrInstance.prototype.parseDate(dateStr, dateFormat)

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

サンプル

JavaScript
let date = FlatpickrInstance.prototype.parseDate("2016-10-20", "Y-m-d");
document.getElementById('disp_date').innerHTML = date;
HTML
<p id="disp_date"></p>


JavaScript
let date = FlatpickrInstance.prototype.parseDate("31/01/1995", "d/m/Y");
document.getElementById('disp_date').innerHTML = date;
HTML
<p id="disp_date"></p>

FlatpickrInstance.prototype.formatDate(dateObj, dateFormat)

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

サンプル

JavaScript
let date = FlatpickrInstance.prototype.formatDate(new Date(), "Y-m-d h:i K");
document.getElementById('disp_date').innerHTML = date;
HTML
<p id="disp_date"></p>

  rss_feed
info_outline home keyboard_arrow_left keyboard_arrow_right