如何在bootstrap daterangepicker中禁用特定的日期范围？

我想在bootstrap daterangepicker中禁用特定的日期范围。

我需要使用bootstrap daterangepicker，它为我提供了限制特定日期范围的选项。

要禁用日期，请使用datesDisabled方法提供数组。

此CodePen中禁用了某些日期。 

 $("#picker").datepicker({ datesDisabled:["11/24/2016","11/28/2016","12/02/2016","12/23/2016"] });

编辑

以前的答案是Bootstap DatePicker …
抱歉误读，我的不好。

以下是我为Bootstrap DateRangePicker发现的内容： 

 // Define the disabled date array var disabledArr = ["11/24/2016","11/28/2016","12/02/2016","12/23/2016"]; $("#picker").daterangepicker({ isInvalidDate: function(arg){ console.log(arg); // Prepare the date comparision var thisMonth = arg._d.getMonth()+1; // Months are 0 based if (thisMonth<10){ thisMonth = "0"+thisMonth; // Leading 0 } var thisDate = arg._d.getDate(); if (thisDate<10){ thisDate = "0"+thisDate; // Leading 0 } var thisYear = arg._d.getYear()+1900; // Years are 1900 based var thisCompare = thisMonth +"/"+ thisDate +"/"+ thisYear; console.log(thisCompare); if($.inArray(thisCompare,disabledArr)!=-1){ console.log(" ^--------- DATE FOUND HERE"); return true; } } }).focus();

这适用于此CodePen 。

在评论中编辑奖金问题 ;）

上面是绘制带有禁用日期的日历。
现在，您需要的是再次比较所选范围，在应用 （当用户选择范围时）时，禁止包含一些禁用日期的范围。

所以这是一个额外的function： 

 $("#picker").on("apply.daterangepicker",function(e,picker){ // Get the selected bound dates. var startDate = picker.startDate.format('MM/DD/YYYY') var endDate = picker.endDate.format('MM/DD/YYYY') console.log(startDate+" to "+endDate); // Compare the dates again. var clearInput = false; for(i=0;idisabledArr[i]){ console.log("Found a disabled Date in selection!"); clearInput = true; } } // If a disabled date is in between the bounds, clear the range. if(clearInput){ // To clear selected range (on the calendar). var today = new Date(); $(this).data('daterangepicker').setStartDate(today); $(this).data('daterangepicker').setEndDate(today); // To clear input field and keep calendar opened. $(this).val("").focus(); console.log("Cleared the input field..."); // Alert user! alert("Your range selection includes disabled dates!"); } });

请在此处查看改进的CodePen 。

Louys Patrice Bessette的答案很棒。

我只是想让它更准确，因为我发现1个错误，当你选择不同月份的开始日期和结束日期以及它们之间的禁用日期时它不会发出警报。 原因在于此 

 startDatedisabledArr[i]

你需要在比较之前解析Date对象，否则它会像这样假 

 startDate = new Date(picker.startDate.format('MM/DD/YYYY')) endDate = new Date(picker.endDate.format('MM/DD/YYYY'))

类似于disableArr中的禁用日期

谢谢

Interesting Posts