如何禁用引导日期范围选择器中的特定日期范围? [英] how to disable specific date range in bootstrap daterangepicker?

问题描述

我想在引导日期范围选择器中禁用特定的日期范围.

I want to disable specific date range in bootstrap daterangepicker.

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

I need to use bootstrap daterangepicker which provides me the option of restricting the specific date range.

推荐答案

要禁用日期，请使用 datesDisabled方法以提供一个数组.

To disable dates, use datesDisabled method to provide an array.

此CodePen 中的某些日期已被禁用..

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

---

编辑

---

EDIT

先前的答案是关于Bootstap DatePicker ...
对不起，我读错了.

Previous answer was for Bootstap DatePicker...
Sorry for the misreading, my bad.

这是我为Bootstrap DateRangePicker找到的内容:

Here is what I have found for 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 中起作用

This is working in this CodePen.

---

编辑注释中的奖金问题;)

---

EDIT for the bonus question in comments ;)

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

Above, is to draw the calendar with disabled dates.
Now, what you need is to compare the selected range again, on Apply (when user has selected a range), to disallow a range that would include some disabled dates.

这是一个附加功能:

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

请参见>在此处获得改进的CodePen .

这篇关于如何禁用引导日期范围选择器中的特定日期范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！