kdcsライブラリー

jQueryを使わないウェブサイトを構築するための手法「デートピッカー編」

flatpickr

html

<link rel="stylesheet" href="flatpickr.min.css">
<script src="flatpickr.min.js"></script>

<input id="date" type="text">

設定例
・毎週の休日：土日を無効化
・個別の休日：配列で指定
・第1・第3・第5土曜日を休日：disableに関数を渡して判定

// 個別の休日（文字列 or Date）
const specificHolidays = [
  "2026-03-21",
  "2026-04-29",
  new Date(2026, 4, 3) // 2026-05-03
];

// 第1・第3・第5土曜日かどうか判定する関数
function isNthSaturday(date) {
  const day = date.getDay();      // 0:日〜6:土
  if (day !== 6) return false;    // 土曜以外は対象外

  const d = date.getDate();       // 日にち
  const nth = Math.floor((d - 1) / 7) + 1; // 第何週か（1〜5）
  return nth === 1 || nth === 3 || nth === 5;
}

flatpickr("#date", {
  dateFormat: "Y-m-d",
  disable: [
    // 個別の休日
    ...specificHolidays,

    // 関数で動的に無効化
    function(date) {
      const day = date.getDay();

      // 毎週の休日（例：日曜=0, 土曜=6）
      if (day === 0 || day === 6) return true;

      // 第1・第3・第5土曜日を休日にする
      if (isNthSaturday(date)) return true;

      // それ以外は有効
      return false;
    }
  ]
});