JQuery DatePicker 和 beforeShowDay
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14484159/
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
JQuery DatePicker and beforeShowDay
提问by user1826124
I am desperately trying to use this feature to enable only specific days in my datepicker, but the beforeShowDayfunction is never triggered :(
我拼命尝试使用此功能在我的日期选择器中仅启用特定日期，但该beforeShowDay功能从未被触发:(
even this is not working:
即使这不起作用：
$(document).ready(function(){
/*initialisation des composants*/
initComponent();
});
availableDates = new Array();
/* Fonction d'initialisation des composants */
function initComponent(){
/* Date retrait */
$("#dateRetrait").datepicker();
$("#dateRetrait").datepicker({beforeShowDay: function(d) {
console.log("bsd");
alert("bsd");
}});
//$("#dateRetrait").datepicker({buttonImage: "../../../Images/boutons/btn_calendier.png"});
//$("#dateRetrait").datepicker({showButtonPanel: true });
//$("#dateRetrait").datepicker({beforeShow: function() {setTimeout(function() {$(".ui-datepicker").css("z-index", 9999999999);}, 10);}});
$('#comboLieux').attr('disabled', 'disabled');
$('#comboCreneau').attr('disabled', 'disabled');
$('#dateRetrait').attr('disabled', 'disabled');
$('#dateRetrait').datepicker('option', 'minDate', new Date());
$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');
}
If you have any ideas, I would greatly appreciate it!
如果您有任何想法，我将不胜感激！
in fact, even this is not working:
事实上，即使这样也行不通：
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
$( "#datepicker" ).datepicker({beforeShowDay: function(d) {
console.log(d);
alert(d);
}});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
回答by Dom
According to jQueryUI's DatepickerAPI,
根据jQueryUI 的 DatepickerAPI，
This explains why
这解释了为什么
$("#dateRetrait").datepicker({beforeShowDay: function(d) {
console.log("bsd");
alert("bsd");
}});
does not work.
不起作用。
Also I noticed you are calling .datepicker()multiple times and each time you are giving it different parameters.
我还注意到您.datepicker()多次调用，每次都给它不同的参数。
Instead of:
代替：
$("#dateRetrait").datepicker();
$("#dateRetrait").datepicker({beforeShowDay: function(d) {
console.log("bsd");
alert("bsd");
}});
$('#dateRetrait').datepicker('option', 'minDate', new Date());
$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');
Try doing this:
尝试这样做：
$("#dateRetrait").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
beforeShowDay: function(d) {
var dmy = (d.getMonth()+1);
if(d.getMonth()<9)
dmy="0"+dmy;
dmy+= "-";
if(d.getDate()<10) dmy+="0";
dmy+=d.getDate() + "-" + d.getFullYear();
console.log(dmy+' : '+($.inArray(dmy, availableDates)));
if ($.inArray(dmy, availableDates) != -1) {
return [true, "","Available"];
} else{
return [false,"","unAvailable"];
}
}
});
I have also provided you with a demo: http://jsfiddle.net/yTMwu/18/. Hope this helps!
我还为您提供了一个演示：http: //jsfiddle.net/yTMwu/18/。希望这可以帮助！
回答by Indiana Dave
The date being passed into the callback function is a full-fledged date-and-time. So if you want it to be compared against a short date string, one of them must be converted. This snippet of just the beforeShowDay attribute portion of the datepicker demonstrates that a conversion is necessary. Here I simply disable a single date on the calendar to prove the point.
传递给回调函数的日期是完整的日期和时间。因此，如果您希望将其与短日期字符串进行比较，则必须转换其中之一。日期选择器的 beforeShowDay 属性部分的这个片段表明转换是必要的。在这里，我只是禁用日历上的单个日期来证明这一点。
beforeShowDay: function(date) {
var dd = date.getDate();
var mm = date.getMonth()+1; //January is 0!
var yyyy = date.getFullYear();
var shortDate = mm+'/'+dd+'/'+yyyy;
var test = "12/30/2014";
if (shortDate == test) {
return [false, "" ];
} else {
return [true, "" ];
}
}
回答by Vasyl Zhuryk
Dom gave good explain. And I would like to add more shorten code:
多姆给出了很好的解释。我想添加更多的缩短代码：
If you have array of availableDatesin format: 0000-00-00 (yyyy-mm-dd)
如果您有可用日期数组的格式：0000-00-00 (yyyy-mm-dd)
var availableDates = ["2020-01-05", "2020-01-10", "2020-01-14"];
$("#dateRetrait").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
beforeShowDay: function(d) {
var year = d.getFullYear(),
month = ("0" + (d.getMonth() + 1)).slice(-2),
day = ("0" + (d.getDate())).slice(-2);
var formatted = year + '-' + month + '-' + day;
if ($.inArray(formatted, availableDates) != -1) {
return [true, "","Available"];
} else{
return [false,"","unAvailable"];
}
}
});
beforeShowDay- works each time, before render day))
beforeShowDay- 每次都有效，在渲染日之前））
$.inArray- find value in array (-1 if no value)
$.inArray- 在数组中查找值（如果没有值，则为 -1）
In this solution, you can make stopDates, just change line:
在此解决方案中，您可以制作stopDates，只需更改行：
if ($.inArray(formatted, availableDates) != -1) {
to
到
if ($.inArray(formatted, availableDates) == -1) {
