どうもこんにちは塚本です。
今日は祝日の判定ができる日付ピッカーをつくったお話をしようと思います。

Web開発において、日付ピッカーの実装は見かけ以上に複雑です。
僕はflatpickrという軽量なjsライブラリを使うことが多いです。

土日祝だけは営業時間が変わる！みたいなシチュエーションは多く、特に祝日は年ごとに変わることもあるので、これに悩んできた開発者は多いのではないでしょうか…？

jQueryも使っていないので参考になれば嬉しいです。

土日の判定

土日の判定はとても簡単で、以下の関数で実現できます。

const isWeekend = (date) => {
  const dayOfWeek = date.getDay(); // 0が日曜日、6が土曜日

  // 土曜日または日曜日の場合はtrueを返す
  return dayOfWeek === 0 || dayOfWeek === 6;
}

使用例はこちらになります。

// 使用例
const targetDate = new Date('2023-10-06'); // 2023年10月6日（土曜日）
if (isWeekend(targetDate)) {
  alert("指定した日は土日です！");
} else {
  alert("指定した日は平日です。");
}

祝日の判定

祝日の判定については、祝日のリストを取得しその日付と照らし合わせて判定します。
リストの取得にはこちらのAPIを使わせていただいております。

const isHoliday = (date) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        xhr.open("GET", "https://holidays-jp.github.io/api/v1/date.json", true);
        
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const holidays = JSON.parse(xhr.responseText);
                    if (date in holidays) {
                        resolve(true);
                    } else {
                        resolve(false);
                    }
                } else {
                    reject("データの取得に失敗しました");
                }
            }
        };
        
        xhr.send();
    });
};

非同期でやり取りしています。
使用例はこちらになります。

// 使用例
const targetDate = '2023-10-09'; // 2023年10月9日（スポーツの日）
isHoliday(targetDate)
    .then((result) => {
        if (result) {
            alert("指定した日は祝日です");
        } else {
            alert("指定した日は祝日ではありません");
        }
    })
    .catch((error) => {
        console.error(error);
    });

これら二つの関数を使うだけで、簡単に土日祝の判定が可能です。
さっそくflatpickrに組み込んでいきましょう。

祝日判定ができるflatpickr

以下のCodePenで日付を選んでいただくと、祝日判定が可能です。

土日祝の場合はカレンダーの色を変える

flatpickrにはonDayCreateというフックがあるので、それを用いることで全ての「日」ごとに処理を追加することができます。

仕組み

onDayCreateにchange_holiday_bg_colorという関数を渡しています。
中身はこの記事の前半で説明した関数になります。

flatpickr("#flatpickr", {
    onDayCreate: change_holiday_bg_color
});
// カレンダーの日付要素に土日祝クラスを付与する関数
const change_holiday_bg_color = (dObj, dStr, fp, dayElem) => {
    // 祝日クラス付与
    isHoliday(dayElem.dateObj)
        .then((result) => {
            if (result) {
                dayElem.classList.add("holiday");
            }
        })
        .catch((error) => {
            console.error(error);
        });

    // 土日クラス付与
    let dayOfWeek = dayElem.dateObj.getDay();
    switch (dayOfWeek) {
        case 0:
            dayElem.classList.add("sunday");
            break;
        case 6:
            dayElem.classList.add("saturday");
            break;
    }
};

詳しくはCodePenの中身を見てください。

まとめ

判定関数を作っておくだけで、flatpickrのみならず、汎用的に使うことができます。
jQueryも使っていないので基本的にコピペで動くと思います！

ぜひ、カスタマイズして開発に活かしてくださいm(_ _)m