Events & Hooks

イベント

flatpickrには一般的で便利なイベントフックがあります。 各イベントフックには関数または、関数配列を指定することができます。

インスタンス化するとオブジェクトを介してすべてのフックにアクセスすることができます。 オブジェクト内では、全ての関数が配列として格納されているので、 関数を追加、削除する場合はその配列自体を操作する必要があります。
例：instance.config.onChange.push(function() { } );

フックに追加された各関数は以下の3つの引数を受け取ります。

• 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はカレンダーが準備完了になった時点でトリガーされます。

onDestroy

onDestroyはインスタンスが破棄される直前にトリガーされます。

onKeyDown

onKeyDownはキーボードの入力を検知するとトリガーされます。

onParseConfig

onParseConfigはカレンダーの設定がパースされた後にトリガーされます。

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">
<span id="eventHookDisp">[ここにイベントが表示されます]</span>

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