突出显示，禁用 jQuery UI 日期选择器中的特定日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19395558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight, Disable specific days in jQuery UI datepicker
提问by user123456789
Here, i want to achieve following
在这里，我想实现以下目标
- Highlight all holidays in date-picker
- Disable specific days in date-picker
- Disable specific weekends in date-picker
- 在日期选择器中突出显示所有假期
- 在日期选择器中禁用特定日期
- 在日期选择器中禁用特定周末
I have snippets of each separately, but i want all together
我分别有每个片段，但我想要全部在一起
Fiddle:Working Demo
小提琴：工作演示
Highlight holidays
突出假期
var holydays = ['10/17/2013', '10/18/2013', '11/2/2013'];
function highlightDays(date) {
for (var i = 0; i < holydays.length; i++) {
if (new Date(holydays[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
$(function () {
$("#dp").datepicker({
minDate: 0,
dateFormat: 'mm/dd/yy',
inline: true,
numberOfMonths: [1, 2],
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: highlightDays,
});
});
Disable specific days
禁用特定日期
var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
function disableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [false];
}
}
return [true];
}
Disable Weekends
禁用周末
$(function() {
$( "#availability" ).datepicker({
minDate: 0,
dateFormat: 'mm/dd/yy',
inline: true,
numberOfMonths: [1, 2],
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: $.datepicker.noWeekends
});
});
Could anyone help me..
谁能帮我..
Thanks in advance.
提前致谢。
回答by babonamu
change :
改变 ：
$(function () {
$("#dp").datepicker({
minDate: 0,
dateFormat: 'mm/dd/yy',
inline: true,
numberOfMonths: [1, 2],
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: setCustomDate // <-----change function
});
});
add function :
添加功能：
function setCustomDate(date) {
var clazz = "";
var arr1 = highlightDays(date);
if (arr1[1] != "") clazz = arr1[1];
var arr2 = disableAllTheseDays(date);
var arr3 = $.datepicker.noWeekends(date);
return [(!arr2[0] || !arr3[0]) ? false : true, clazz];
}
回答by Chim
We are now in 2014, and a minimal code is required. Here is my way to disable days.
我们现在是 2014 年，需要最少的代码。这是我禁用天的方法。
my variable 'specific' , 0 <= specific <= 7
我的变量 'specific' , 0 <= specific <= 7
in my demo :
1 = sunday2 = saturday4 = Monday to friday
1 = sunday2 = saturday4 = Monday to friday
if specific == 5 that mean 4 + 1 so i allow Monday till friday + sunday.
7 means all days allowed to pick. notice that I only allow to pick starting now to Month + 1
7 表示允许采摘的所有天数。请注意，我只允许从现在开始选择 Month + 1
$( "#datepicker" ).datepicker({
minDate:0,
maxDate: '+1M-1D',
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
var day = date.getDay();
if(day == 6)
return [(specific & 2) > 0, ''];
else if(day == 0)
return [(specific & 1) > 0, ''];
else
return [(specific & 4) > 0, ''];
}
});
回答by Mario Chueca
Just for future references. Since I was looking for the same thing and found these same function to disable days in a lot of different places:
仅供以后参考。由于我正在寻找相同的东西并发现这些相同的功能可以在许多不同的地方禁用天：
http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/https://davidwalsh.name/jquery-datepicker-disable-days
http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/ https://davidwalsh.name/jquery-datepicker-disable-days
var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
function disableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [false];
}
}
return [true];
}
But since you're using inArray, the for is not needed, resulting in this simpler and more efficient function:
但是由于您使用的是 inArray，因此不需要 for，从而产生了这个更简单、更高效的函数：
var disabledDays = ["4-2-2016", "4-4-2016"];
function disableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) return [false];
return [true];
}
回答by civid
This one works for me. Placed before closing body tag.
这个对我有用。放置在关闭 body 标签之前。
function DisableMonday(date) {
var day = date.getDay();
if (day == 1) {
return [false,"","Unavailable"] ;
} else {
return [true] ;
}
}
jQuery(function($){
$('input[name="datum"]').datepicker('option', 'beforeShowDay', DisableMonday).datepicker('refresh');
});
