JQuery DatePicker和beforeShowDay

我拼命地尝试使用此function仅启用我的beforeShowDay特定日期，但从未触发beforeShowDay函数:(

即使这不起作用：

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

如果您有任何想法，我将不胜感激！

事实上，即使这不起作用：

          $(function() { $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); $( "#datepicker" ).datepicker({beforeShowDay: function(d) { console.log(d); alert(d); }}); });    
Date: 
   

Answer 1

根据jQueryUI的Datepicker API，

这解释了原因

 $("#dateRetrait").datepicker({beforeShowDay: function(d) { console.log("bsd"); alert("bsd"); }}); 

不起作用。

另外我注意到你多次调用.datepicker() ，每次给它不同的参数。

代替：

 $("#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'); 

试着这样做：

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

我还为您提供了一个演示： http ： //jsfiddle.net/yTMwu/18/ 。 希望这可以帮助！

Answer 2

传递给回调函数的日期是完整的日期和时间。 因此，如果您希望将其与短日期字符串进行比较，则必须转换其中一个字符串。 这个仅仅是datepicker的beforeShowDay属性部分的片段表明转换是必要的。 在这里，我只是禁用日历上的单个日期来certificate这一点。

  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, "" ]; } } 

Answer 3

Dom给出了很好的解释。 我想添加更多缩短的代码：

如果你有格式的availableDates数组：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 – 每次都在渲染日之前工作））

$ .inArray – 在数组中查找值（如果没有值则返回-1）

在此解决方案中，您可以创建stopDates ，只需更改行：

 if ($.inArray(formatted, availableDates) != -1) { 

至

 if ($.inArray(formatted, availableDates) == -1) {