How to Exclude Weekends and Holidays from jQuery UI Datepicker?

Excluding Saturdays, Sundays, and Holidays from jQuery UI Datepicker

The jQuery UI Datepicker provides a robust tool for selecting dates. To enhance its functionality, you may wish to disable certain dates, such as weekends or holidays. Fortunately, this is possible using the powerful beforeShowDay option.

The beforeShowDay option accepts a function that takes a date as input and returns an array. The return array contains two values:

1. A boolean indicating whether the date is available for selection (true) or not (false).
2. An optional CSS class name to apply to the date, or an empty string for default styling.

Preventing Selection of Weekends

To prevent the selection of Saturdays and Sundays, you can utilize jQuery UI's built-in noWeekends function, which returns false for weekend dates:

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

Excluding Holidays

You can define a custom function to exclude specific holidays from the datepicker. For example, the following code disables selection of national holidays defined in the natDays array:

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, ''];
}

Combining Weekend and Holiday Exclusion

To disable both weekends and holidays, you can combine the noWeekends and nationalDays functions. The following example creates a custom noWeekendsOrHolidays function that returns false for weekend dates or holiday dates:

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

By using the beforeShowDay option with these custom functions, you can effectively disable Saturdays, Sundays, and specific holidays in your jQuery UI Datepicker, allowing you to create a more tailored and restrictive date selection experience.

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