"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > jQuery UI Datepicker excludes weekend and holiday settings

jQuery UI Datepicker excludes weekend and holiday settings

Posted on 2025-04-28
Browse:777

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 

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.

Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3