1. ホーム
  2. javascript

[解決済み] jQuery UI Datepickerで土日(祝日も)を無効にすることはできますか?

2022-04-21 03:15:15

質問内容

予約日を選択するためにdatepickerを使用しています。 日付の範囲は翌月だけに設定済みです。 これは問題なく動作します。 土曜日と日曜日を選択肢から除外したいのですが、可能でしょうか? これは可能でしょうか? もし可能なら、どのようにすればよいですか?

解決方法を教えてください。

そこには beforeShowDay このオプションは、日付ごとに呼び出される関数を受け取り、その日付が許可されている場合はtrueを、許可されていない場合はfalseを返します。 docsから。


ビフォアショーデー

この関数は、パラメータとして日付を受け取り、この日付が選択可能かどうかを示す [0] が true/false に等しい配列を返す必要があります。 1 は、CSS クラス名 (複数可) またはデフォルトの表示では '' に相当します。このメソッドは、日付ピッカーが表示される前に、各日付ごとに呼び出されます。

datepickerに祝祭日を表示します。

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

noWeekendsという、週末の曜日を選択できないようにする組み込み関数が1つ存在する。

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })


この2つを組み合わせるには、次のような方法があります(仮に nationalDays 関数を使用します)。

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

更新情報 : なお、jQuery UI 1.8.19以降では beforeShowDayオプション は、オプションで第3のパレメータであるポップアップツールチップを受け付けます。