用日期填充文本框，但在 JQuery 日期选择器中不显示周末答案

【问题标题】：Fill text box with date but don't show weekends in JQuery Date Picker用日期填充文本框，但在 JQuery 日期选择器中不显示周末
【发布时间】：2013-08-22 12:37:38
【问题描述】：

我正在使用以下代码在页面加载时在日期文本字段中显示日期或预加载日期。

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

但我想跳过周末显示/预置日期字段的周六和周日。

请帮忙！

【问题讨论】：

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

有一个 beforeShowDay 选项，它为每个日期调用一个函数，如果日期被允许则返回 true，否则返回 false。来自文档：

beforeShowDay

该函数将日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示此日期是否可选，1 等于 CSS 类名称或默认为 ''介绍。日期选择器中的每一天都会在显示之前调用它。

在日期选择器中显示一些国定假日。

$(".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, ''];
}

存在一个名为 noWeekends 的内置函数，可防止选择周末。

$(".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;
    }
}

更新：请注意，从 jQuery UI 1.8.19 开始，beforeShowDay 选项还接受可选的第三个参数，即弹出工具提示

您也可以在假期

使用它

【讨论】：

【解决方案2】：

据我了解，您不想显示周末日期。

从 datePicker 获取当前日期。
使用date.getUTCDay()检查星期几。
实现一个简单的if..else.. 条件来检查日期。
.datepicker("destroy") 将从附加的元素中删除日期选择器。

$(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
    }
});

注意：getUTCDay根据通用时间返回指定日期的星期几，其中0代表星期日。

【讨论】：

这是我正在使用的脚本。请检查。
@Krishnam 我找不到你。我也没有在这里找到脚本。