Events & Hooks

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

---

イベント

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

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){
        // Utilize dayElem.dateObj, which is the corresponding Date

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