我使用日期选择器来选择约会日期。我已经将日期范围设置为仅下个月。这很好用。我想从可用选项中排除周六和周日。这能做到吗？如果是这样，如何？
是否可以使 jQuery UI Datepicker 禁用周六和周日（和节假日）？
IT技术
javascript
jquery
jquery-ui
jquery-ui-datepicker
2021-01-29 21:41:25
6个回答
有一个beforeShowDay选项，它需要为每个日期调用一个函数，如果日期允许则返回 true，否则返回 false。从文档：
演出日之前
该函数将日期作为参数，并且必须返回一个数组，其中 [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 })
要将两者结合起来，您可以执行以下操作（假设nationalDays上面的函数）：
$(".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 选项还接受可选的第三个参数，即弹出工具提示
如果您根本不想出现周末，只需：
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
日期选择器内置了此功能！
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
这些答案非常有帮助。谢谢你。
我在下面的贡献添加了一个数组，其中多天可以返回 false（我们每周二、周三和周四关闭）。我将特定日期加上年份和无周末功能捆绑在一起。
如果您想要周末休息，请将 [Saturday]、[Sunday] 添加到 closedDays 数组中。
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
这里每个人都喜欢的解决方案似乎非常激烈......我个人认为做这样的事情要容易得多：
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
这样你的日期是人类可读的。这并没有什么不同，只是这样对我来说更有意义。