如何禁用自举daterangepicker中的特定日期范围？

我想禁用引导日期范围选择器中的特定日期范围。如何禁用自举daterangepicker中的特定日期范围？

我需要使用引导程序daterangepicker，它提供了限制特定日期范围的选项。

来源

2016-11-18 php developer

您是否厌倦了文档中的'minDate'和'maxDate'？ –

其实我希望它的横幅购买，所以，它来与任何范围。 –

任何范围意味着什么？你的意思是动态范围？ –

要禁用日期，请使用datesDisabled method来提供数组。

有些日期在this CodePen被禁用。

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

编辑

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

以下是我已经找到了引导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();

这在this CodePen工作。

编辑在评论奖金问题;）

以上，是画与禁用日期的日历。
现在，您需要的是再次比较所选范围，对应用（当用户选择一个范围时），禁止包含某些禁用日期的范围。

因此，这里是一个附加功能：

$("#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;i<disabledArr.length;i++){ 
     if(startDate<disabledArr[i] && endDate>disabledArr[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!"); 
    } 
});

见improved CodePen here。

来源

2016-11-19 02:16:01

它不能与daterangepicker一起使用。 –

哈...对不起。但你有没有试过[isInvalidDate]（http://www.daterangepicker.com/#options）？它看起来是同样的选择。 –

非常感谢。最后它的工作。 –

Louys Patrice Bessette的回答很棒。

我只是想让它更加准确，因为我发现了1个错误，当您在不同的月份中选择开始日期和结束日期以及它们之间的禁用日期时，它不会提醒您。原因是这里

startDate<disabledArr[i] && endDate>disabledArr[i]

你需要在比较之前解析到日期对象，也将是错误的这样

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

类似于disableArr禁用的日期

谢谢

来源

2017-04-30 17:14:51

我刚刚看到你的帖子......感谢我的回答。 ;）+1 –

如何禁用自举daterangepicker中的特定日期范围？

回答

相关问题