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

前端 未结 11 672
無奈伤痛
無奈伤痛 2020-11-22 04:02

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 f

11条回答
  •  清酒与你
    2020-11-22 04:30

    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

提交回复
热议问题