How to Disable Weekends and Holidays in jQuery UI Datepicker?

Disabling Saturdays, Sundays, and Holidays in jQuery UI Datepicker

The jQuery UI Datepicker offers extensive customization options to cater to specific requirements. One common need is to disable certain days of the week or specific dates from the selection range.

Disabling Weekends

To prevent users from selecting weekend days (Saturdays and Sundays), you can leverage the built-in $.datepicker.noWeekends function:

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

Disabling Holidays

To exclude specific holidays from the selection, you can create a custom function like:

function nationalDays(date) {
  // Replace [YOUR_HOLIDAY_DATES] with the specific dates you want to disable.
  if ([YOUR_HOLIDAY_DATES].includes(date.toString())) {
    return [false, 'holiday-day'];
  }
  return [true, ''];
}

Combining Weekend and Holiday Disabling

To disable both weekends and holidays, you can combine the two functions:

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

Then apply the combined function to the Datepicker:

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

Note: In jQuery UI 1.8.19 and later, the beforeShowDay option supports an optional third parameter for displaying a tooltip on disabled dates.

The above is the detailed content of How to Disable Weekends and Holidays in jQuery UI Datepicker?. For more information, please follow other related articles on the PHP Chinese website!