flatpickrで祝日・任意の曜日を無効にする

2023.05.31

flatpickrで祝日・任意の曜日を無効にするのに手間取ったので、備忘録として纏めます。

flatpickrで日付を無効にする方法は以下の3つです。

  • 特定の日付を無効にする
{
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
}
  • 日付の範囲を無効にする
{
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}
  • 関数による日付の無効化
{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

今回だと関数を利用して、祝日・任意の曜日を無効にすることになります。

任意の曜日を無効にする

任意の曜日を無効にするのは、公式ドキュメントのexampleと同様の手順で記述出来ます。

getDay()メソッドを利用してdateの曜日を取得、特定の曜日であればtrueを返す関数をdisableオプションに記載します。

getDay()の返り値は0が日曜日、6が土曜日を表します。

let config = {
	locale: "ja",
	minDate: new Date().fp_incr(1),
	maxDate: new Date().fp_incr(7),
	disable: [
	// 土曜日と日曜日は選択できない
		function(date) {
			return (date.getDay() === 0 || date.getDay() === 6);
		}
};
flatpickr(".class-datepicker", config);

祝日を無効にする

「日本 祝日 API」でググると以下のサイトがヒットしました。

Holidays JP API (日本の祝日API)
Holidays JP API は、日本の祝日一覧をJSONで返却するAPIです (CSV形式もサポート)
holidays-jp.github.io

去年・今年・来年の日本の祝日を以下の様なフォーマットで返却してくれます。

{
  "2017-01-01": "元日",
  "2017-01-02": "元日 振替休日",
  "2017-01-09": "成人の日"
}

これを使って祝日を無効にします。
完成形は以下で、一つずつ処理について解説していきます。

$.getJSON("https://holidays-jp.github.io/api/v1/date.json", function(data) {
	const holidays = Object.keys(data);
	let config = {
		locale: "ja",
		minDate: new Date().fp_incr(1),
		maxDate: new Date().fp_incr(6),
		disable: [
			function(date) {
				// 祝日か日曜日の場合に無効化する
                                const diff = date.getTimezoneOffset() * 60 * 1000;
                                const plusLocal = new Date(date - diff)
                                const dateString = plusLocal.toISOString().split("T")[0];
			        return holidays.includes(dateString) || date.getDay() === 0;
			}
		],
	};
	flatpickr(".class-name", config);
});

$.getJSONで祝日APIを叩きます。続いて第二引数にリクエスト成功時の処理を記述していきます。

Object.keysでdataのキーを取得します。
これでholidaysには祝日の日付のみが格納された配列が入ってます。

diffにUTCとローカルタイムゾーンとの差を取得し、分からミリ秒に変換したものを格納。

日本時間になったdateをplusLocalに入れておきます。

date.toISOString().split(“T”)[0] 力技ですが、

date.toISOString()
-> 2023-05-30T00:00:00.000Z
date.toISOString().split("T")
-> [2023-05-30, T00:00:00.000Z]
date.toISOString().split("T")[0]
-> 2023-05-30

これでholidaysに同様の日付があるか比較出来るようになります。