【お知らせ】
この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[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>