flatpickr - にほんご。

Events & Hooks

更新日: 2018-05-31

イベント

flatpickrには一般的で便利な5つのイベントフックがあります。 各イベントフックには関数または、関数配列を指定することができます。 コールバックについては以下の通りです。

selectedDatesは選択した日付のDate Objです。日付選択していない場合は空です。

dateStrは選択した日付の日付文字列です。 dateFormatオプションでフォーマットされた値が格納されます。

instanceはflatpickrオブジェクトです。flatpickrの関数やプロパティを持っています。

フック

onChange

onChangeは日付を選択したり、日時を変更した時に発火します。


onOpen

onOpenはカレンダーを開いた時に発火します。


onClose

onCloseはカレンダーを閉じた時に発火します。


onMonthChange

onMonthChangeは「月」を変更した場合に発火します。スクリプトで「月」を変更した場合も発火します。


onYearChange

onYearChangeは「年」を変更した場合に発火します。スクリプトで「年」を変更した場合も発火します。

{
  onChange: function(selectedDates, dateStr, instance) {
    //...
  },
  onOpen: [
    function(selectedDates, dateStr, instance){
      //...
    },
    function(selectedDates, dateStr, instance){
      //...
    }
  ],
  onClose: function(selectedDates, dateStr, instance){
    // ...
  }
}

onReady

onReadyはカレンダーが準備完了になった時点で発火します。


onValueUpdate

onValueUpdateは日付が新しい値に更新された時点で発火します。

デモ

各種イベントを発火させた際に、その内容を表示します。

JavaScript
const config = {
  inline: true,
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById('eventHookDisp').innerHTML = 'onChange作動';
  },
  onMonthChange: function(selectedDates, dateStr, instance) {
    document.getElementById('eventHookDisp').innerHTML = 'onMonthChange作動';
  },
  onYearChange: function(selectedDates, dateStr, instance) {
    document.getElementById('eventHookDisp').innerHTML = 'onYearChange作動';
  },
  onValueUpdate: function(selectedDates, dateStr, instance) {
    document.getElementById('eventHookDisp').innerHTML = 'onValueUpdate作動';
  },
}
let fp = flatpickr('.flatpickr', config);
HTML
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly"><br>
<span id="eventHookDisp">[ここにイベントが表示されます]</span><br>

[ここにイベントが表示されます]

onDayCreate

onDayCreateはカレンダーのすべての日付セルをフルコントロールします。

デモ

カレンダーの日付に対してマーカーを付与します。付与する日付はランダムです。

全ての「日」にはposition: relative;が指定されているのでマーカーの配置も簡単です。

JavaScript
const config = {
  onDayCreate: function(dObj, dStr, fp, dayElem){
    // 対応する日付のdayElem.dateObjを使用します。
 
    // dummy logic
    if (Math.random() < 0.15)
      dayElem.innerHTML += "<span class='event'></span>";
 
    else if (Math.random() > 0.85)
      dayElem.innerHTML += "<span class='event busy'></span>";
  }
}
let fp = flatpickr('.flatpickr', config);
CSS
.event {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 150px;
  bottom: 3px;
  left: calc(50% - 1.5px);
  content: " ";
  display: block;
  background: #3d8eb9;
}
 
.event.busy {
  background: #f64747;
}
HTML
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly"><br>



© 2017 Gregory Petrosyan Released under the MIT license

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