如何在引导 daterangepicker 中禁用特定日期范围？答案

【问题标题】：how to disable specific date range in bootstrap daterangepicker?如何在引导 daterangepicker 中禁用特定日期范围？
【发布时间】：2017-04-01 21:28:47
【问题描述】：

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

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

【问题讨论】：

您是否厌倦了文档中的minDate 和maxDate？
其实我想要它来购买横幅广告，所以它有任何范围。
任何范围的意思？你的意思是动态范围？
是的。假设本月第 1 个用户已经购买了日期 3 到 6，第 2 个用户已经购买了日期 8 到 10，那么这 2 个范围在选择中被禁用。
所以会有多个范围被禁用？

标签： jquery twitter-bootstrap-3 jquery-plugins bootstrap-datepicker bootstrap-daterangepicker

【解决方案1】：

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

this 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();

这在this CodePen 中工作。

编辑 cmets 中的奖励问题 ;)

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

所以这里有一个附加功能：

$("#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。

【讨论】：

哈...对不起。但是你试过isInvalidDate 吗？看起来是同一种选择。
但仍需要更多帮助。如果我们禁用日期 3 到 5 并且有人从日期 1 到 7 中选择，那么这里可以选择。但我想禁止它。只有未禁用的日期范围可以选择。
我更新了我的答案...注意我纠正了绘图功能中的一个小故障。我将 return arg._pf = {userInvalidated: true}; 更改为 return true;... 它导致控制台中出现 moment 错误。 ;)
我们可以为这个禁用日期添加额外的课程吗？
是的，通过 CSS，您可以操作 disabled 类。要强制使用 Bootstrap 已经定义的属性，只需添加 !important 即可。示例：text-decoration:none !important; 将删除日期上的破折号。

【解决方案2】：

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 中的禁用日期

谢谢

【讨论】：

我刚看到您的帖子...感谢您对我的回答的精确。 ;) +1