Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?

like image 599
cletus Avatar asked Feb 02 '09 00:02

cletus


People also ask

How do I disable Saturday and Sunday on datepicker?

To disable the weekends in Bootstrap Datepicker you need to set the daysOfWeekDisabled property value to [0, 6]. Then all the Weekends will be disabled in the datepicker control. Check this example.

How do I disable datepicker?

To disable a datepicker in jQuery UI we will be using disable() method which is discussed below: jQuery UI disable() method is used to disable the datepicker. Parameters: This method does not accept any parameters.

How do I disable UI datepicker trigger?

Datepicker has a built-in disable method for this you can use, which also disables the text input, like this: $("#datepicker"). datepicker("disable");

What is datepicker in jQuery?

Advertisements. Datepickers in jQueryUI allow users to enter dates easily and visually. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.


1 Answers

There is the beforeShowDay option, which takes a function to be called for each date, returning true if the date is allowed or false if it is not. From the docs:


beforeShowDay

The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and 1 equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.

Display some national holidays in the 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, ''];
}

One built in function exists, called noWeekends, that prevents the selection of weekend days.

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

To combine the two, you could do something like (assuming the nationalDays function from above):

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

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

Update: Note that as of jQuery UI 1.8.19, the beforeShowDay option also accepts an optional third paremeter, a popup tooltip

like image 142
Adam Bellaire Avatar answered Oct 12 '22 12:10

Adam Bellaire