Vipul patel Vipul patel - 1 year ago 251
jQuery Question

how to disable specific date range in bootstrap daterangepicker?

I want to disable specific date range in bootstrap daterangepicker.

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

Answer Source

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

Some dates are disabled in this CodePen.



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

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"];


     isInvalidDate: function(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("      ^--------- DATE FOUND HERE");
             return true;


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.

So here is an additional function:


    // 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;
        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.

        // To clear selected range (on the calendar).
        var today = new Date();

        // To clear input field and keep calendar opened.
        console.log("Cleared the input field...");

        // Alert user!
        alert("Your range selection includes disabled dates!");

See the improved CodePen here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download