土曜日と日曜日は選択できない！jQuery UI Datepickerで特定の曜日を無効にする方法

2024-07-27

jQuery UI Datepickerで土曜日、日曜日、祝日を無効にする方法

土曜日と日曜日を無効にする

土曜日と日曜日を無効にするには、beforeShowDayオプションを使用します。このオプションは、日付ピッカーが表示される前に呼び出され、選択された日付が有効かどうかを判断することができます。

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [(day != 0 && day != 6), ''];
    }
  });
});

上記のコードでは、beforeShowDayオプションで、getDay()メソッドを使用して曜日を取得しています。土曜日と日曜日はそれぞれ0と6なので、これらの曜日以外はtrueを返しています。trueを返すと、その日付は選択可能になります。

祝日を無効にする

祝日を無効にするには、beforeShowDayオプションと、祝日のリストが必要です。祝日のリストは、配列やオブジェクトで定義できます。

var holidays = [
  '2024-01-01', // 元日
  '2024-02-11', // 建国記念の日
  '2024-03-20', // 春分の日
  '2024-04-29', // 昭和の日
  '2024-05-03', // 憲法記念日
  '2024-05-04', // みどりの日
  '2024-07-18', // 海の日
  '2024-08-11', // 山の日
  '2024-09-15', // 敬老の日
  '2024-10-10', // 体育の日
  '2024-11-03', // 文化の日
  '2024-11-23', // 勤労感謝の日
];

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      var holiday = $.inArray(date.toString(), holidays) != -1;
      return [(day != 0 && day != 6 && !holiday), ''];
    }
  });
});

上記のコードでは、beforeShowDayオプションで、$.inArray()メソッドを使用して、選択された日付が祝日のリストに含まれているかどうかをチェックしています。含まれている場合はfalseを返しているので、その日付は選択不可になります。

上記以外にも、beforeShowDayオプションを使用して、さまざまな条件を設定することができます。例えば、特定の期間だけ選択可能にする、特定の日付だけ選択可能にする、などです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery UI Datepickerで土曜日、日曜日、祝日を無効にする</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
  <h1>jQuery UI Datepickerで土曜日、日曜日、祝日を無効にする</h1>
  <p>以下の日付入力フィールドでは、土曜日、日曜日、祝日は選択できません。</p>
  <input type="text" id="datepicker">
  <script>
  var holidays = [
    '2024-01-01', // 元日
    '2024-02-11', // 建国記念の日
    '2024-03-20', // 春分の日
    '2024-04-29', // 昭和の日
    '2024-05-03', // 憲法記念日
    '2024-05-04', // みどりの日
    '2024-07-18', // 海の日
    '2024-08-11', // 山の日
    '2024-09-15', // 敬老の日
    '2024-10-10', // 体育の日
    '2024-11-03', // 文化の日
    '2024-11-23', // 勤労感謝の日
  ];

  $(function() {
    $("#datepicker").datepicker({
      beforeShowDay: function(date) {
        var day = date.getDay();
        var holiday = $.inArray(date.toString(), holidays) != -1;
        return [(day != 0 && day != 6 && !holiday), ''];
      }
    });
  });
  </script>
</body>
</html>

上記のコードをHTMLファイルに保存してブラウザで開くと、土曜日、日曜日、祝日が選択できない日付入力フィールドが表示されます。

動作確認

Webブラウザ (Chrome、Firefox、Edgeなど)
jQuery 3.6.0以上
jQuery UI 1.13.2以上

上記の環境が整っていれば、以下の手順で動作確認できます。

ブラウザでHTMLファイルを開きます。
日付入力フィールドをクリックします。
土曜日、日曜日、祝日が選択できないことを確認します。

minDateとmaxDateオプションを使用する

minDateとmaxDateオプションを使用して、選択可能な日付の範囲を指定することができます。

$(function() {
  $("#datepicker").datepicker({
    minDate: new Date(2024, 0, 1), // 2024年1月1日以降のみ選択可能
    maxDate: new Date(2024, 11, 31), // 2024年12月31日以前のみ選択可能
  });
});

上記のコードでは、minDateオプションで2024年1月1日を、maxDateオプションで2024年12月31日を指定しています。

この方法を使用すると、土曜日、日曜日、祝日を含むすべての曜日を選択することができますが、選択可能な日付範囲が限定されます。

disableDaysオプションを使用する

disableDaysオプションを使用して、無効にする曜日を指定することができます。

$(function() {
  $("#datepicker").datepicker({
    disableDays: [0, 6] // 土曜日と日曜日を無効にする
  });
});

上記のコードでは、disableDaysオプションで0と6を指定しています。0は土曜日、6は日曜日を表します。

この方法を使用すると、土曜日と日曜日を無効にすることができますが、祝日を無効にすることはできません。

beforeShowオプションを使用する

beforeShowオプションを使用して、日付ピッカーが表示される前に処理を行うことができます。

$(function() {
  $("#datepicker").datepicker({
    beforeShow: function(input, inst) {
      // 祝日のリストを取得
      var holidays = [
        '2024-01-01', // 元日
        '2024-02-11', // 建国記念の日
        '2024-03-20', // 春分の日
        '2024-04-29', // 昭和の日
        '2024-05-03', // 憲法記念日
        '2024-05-04', // みどりの日
        '2024-07-18', // 海の日
        '2024-08-11', // 山の日
        '2024-09-15', // 敬老の日
        '2024-10-10', // 体育の日
        '2024-11-03', // 文化の日
        '2024-11-23', // 勤労感謝の日
      ];

      // 祝日を無効にする
      for (var i = 0; i < holidays.length; i++) {
        var date = new Date(holidays[i]);
        inst.settings.disabledDates.push(date);
      }
    }
  });
});