我使用一个日期选择器来选择预约日期。我已经将日期范围设置为仅限下个月。这个功能很好用。我想在可选日期中排除星期六和星期日。这可以实现吗？如果可以，怎么做？
13个回答
254
有一个 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 })
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选项还接受一个可选的第三个参数，即弹出式工具提示。
- Adam Bellaire
4
43
如果您不想在页面中显示周末，只需使用以下CSS代码：
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
-
4
1完全隐藏日期但显示标题和空白空间的方法是：
td.ui-datepicker-week-end { visibility: hidden; } - Vael Victus这是一种非常简洁的排除周末的方法。 - itsdarrylnorris
谢谢，非常好 :) - Mikhail Zhuikov
谢谢这个。我更喜欢 $.datepicker.noWeekends ... 但是我在一个jquery-ui对话框窗口中有一个日期选择器，无法在没有Jquery TypeError的情况下使其工作。所以这个CSS-Hiding很有用。 - leole
32
日期选择器已经内置了这个功能！
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
- Mike Grace
27
这些答案非常有帮助。谢谢。
我的贡献在下面添加了一个数组，其中多个日期可能返回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];
}
});
- orolo
1
3可以直接编辑您之前的回答，而不是发布全新的回答——可以将两个版本合并在同一个答案中，因为它们非常相似，或者只需删除旧版本，保留更好的版本。 - Yi Jiang
13
大家喜欢的解决方案似乎非常复杂...个人认为做类似这样的事情要简单得多：
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;
}
});
这样你的日期会更容易阅读。其实并没有太大的差别，只是我更喜欢这种方式。
- Cleanshooter
9
你可以使用noWeekends函数来禁用周末的选择。
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
- Malith
6
这段代码将从SQL数据库中获取假日日期，并在UI Datepicker中禁用指定日期。
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
在SQL中创建一个数据库，并将你的假期日期以MM/DD/YYYY格式作为Varchar存储。将以下内容放入getdate.php文件中。
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
愉快的编程 !!!! :-)
- neo
4
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
- Etienne Dupuis
2
在这个版本中，月份、日期和年份决定了在日历上要阻止哪些日期。
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
- Christopher Altman
0
这对我来说没问题。
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
- Mohamad Hamouday
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
Uncaught TypeError: Cannot read property 'noWeekends' of undefined的错误提示，但是国家假期的函数却正常工作。 - LewisJWright