Question

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

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

Answer 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。

<小时/> 在评论中编辑红利问题;）

上面是绘制具有禁用日期的日历现在，您需要的是再次比较所选范围，应用（当用户选择了范围时），以禁止包含某些禁用日期的范围。< / p>

所以这是一个额外的功能：

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

Answer 2

Louys Patrice Bessette的答案很棒。

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

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

你需要在比较之前解析为Date Object，否则它将像这样

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

类似于disableArr中的禁用日期

谢谢

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

2 个答案: