カレンダー表示する際に便利なflatpickrで
アラートなどを出してあげたいときに以下の書き方をしました。
※jQueryを使っています
/**
* カレンダーテスト
* @return なし
*/
// flatpickr実行 以下はクラス名
$('.inputDate').flatpickr({
mode: 'range',
locale: 'ja',
maxDate: 'today',
dateFormat: 'Y/m/d',
defaultDate: ['2019/12/01', '2019/12/10'],
allowInput: true,
onClose: function(selectedDates, dateStr) {
// 値が変更された時の処理
if (!periodJudgment(selectedDates)) {
alert('指定範囲が長すぎます!!');
}
},
});
function periodJudgment(selectedDates) {
// 1年を日数で設定
const oneYearDayCount = 365;
// 選択期間が1年以上の日数の場合はfalseを返す
let diffDate = selectedDates[1] - selectedDates[0];
const diffDateCount = Math.floor(diffDate / (1000 * 60 * 60 * 24));
if (diffDateCount > oneYearDayCount) {
return false;
}
return true;
}
HTMLは以下
<!-- flatpickrを使うために必要 --!>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
<!-- 日にち期間選択用inputフォーム --!>
<input class="inputDate" type="text" value="" />