Fill text box with date but don't show weekends in JQuery Date Picker

问题

I am using the below code to display date or preload date in the date text field when the page is loaded.

$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    }).datepicker("setDate", "0");
});

But I want to skip Weekend days Saturday and Sunday displaying/prelading the date field.

Please Help!

回答1:

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

you can use it also for holidays

回答2:

As per my understanding, you don't want to show weekend dates.

1. Get the curent date from datePicker.
2. Check the day of week using date.getUTCDay().
3. Implement a simple if..else.. condition for checking the day.
4. .datepicker("destroy") will remove datepicker from the element attached.

---

$(function () {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    }).datepicker("setDate", "0");
    date = $("#datepicker").datepicker('getDate');
    var day = date.getUTCDay();
    if ((day == 0) || (day == 5)) {
        $('#datepicker').val('');  // reset the value of text fields
        $("#datepicker").datepicker("destroy"); //detach datepicker from element
    }
});

Note:getUTCDay returns the day of the week in the specified date according to universal time, where 0 represents Sunday.

来源：https://stackoverflow.com/questions/18380687/fill-text-box-with-date-but-dont-show-weekends-in-jquery-date-picker