How to prevent selecting date range in which there is a disabled date in between?

Question

I have two Jquery date pickers, in which a range of dates can be selected.

I have implemented certain restrictions like, the date of textbox2 should be always greater than textbox1. In addition I have disabled certain dates.

What I need is, if a user selects from date, and then selects to date, if there exist a disabled date in between, then the user should not be able to select that range.

For example:

I have disabled the dates: "31-5-2014", "1-6-2014", "2-6-2014"

If user selects date1 as 29-5-2014, and tries to select 4-6-2014 as the second date, then he should not be able to do that as disabled dates are in betweeb. The max value for date2 must be 30-5-2014

Adding the fiddle

Kent Anderson · Accepted Answer · 2014-05-28T05:53:12.970

I added a function "validateDateRange" to your code to illustrate the logic required to complete this task. Please note that the intention of the function I added is to simply pop up an alert if the condition you described occurs. From here you should be able to do whatever you like. Let us know if you have more questions or were looking for something else.

Here are my updates

function validateDateRange() {

    var txtStartDate = $("#start_date");
    var txtEndDate = $("#end_date");
    var startDate;
    var endDate;
    var tempDate;

    if (txtStartDate.val() == "") 
        return false;

    if (txtEndDate.val() == "") 
        return false;

    startDate = new Date(txtStartDate.val());
    endDate = new Date(txtEndDate.val());

    for (i = 0; i < unavailableDates.length; i++) {
        var temp = unavailableDates[i].split("-");

        tempDate = new Date(temp[2], temp[1]-1, temp[0]);

        if (startDate < tempDate && endDate > tempDate) {
            alert("Invalid Date Range");
            return false;
        }
    }
}

Please post your code here so that future visitors to SO can bask in all of its indented glory. — Jay Blanchard, May 23 '14 at 20:27

score 0 · Answer 2 · edited May 23 '17 at 10:30

Provided that The jQuery UI Datepicker doesn't support such functionality, manual way is the way ahead.

You can use onSelect option of date picker in start_date date Picker to achieve this functionality.

   $('#start_date').datepicker(
   {
       beforeShow: customRangeStart,
       beforeShowDay: unavailable,
       minDate: 0,
       dateFormat: "yy-mm-dd",
       changeYear: true,
       onSelect: function() {
           //Do validation functionality here
           triggerOnStartSelect();
        }
   });

And write down the validation functionality for setting the new maxDate of end_date date picker as :

//Trigger upon change event of either start or end date
function triggerOnStartSelect(){
    var startDate = new Date($("#start_date").datepicker("getDate"));
    var endDate = new Date($("#end_date").datepicker("getDate"));    
    //if required you could reset all of the default setting here //
    //And can also validate the date objects 

    //Holds to be set maxdate of end_date datepicker
    var tempEndDate= null ;
    //unavailableDateObjects : Array of date objects listed as disabled
      $.each(unavailableDateObjects, function(i, disabledRangeDate) {
       if (startDate < disabledRangeDate) {
           tempEndDate=new Date(disabledRangeDate);
           //subtracts one day from the nearest disabled range date 
           tempEndDate.setDate(tempEndDate.getDate() - 1);
           return false;
        }
    }); 
    //Sets maxDate to the closest disabled date range or null . if null denotes no maxdate.
    $( "#end_date" ).datepicker( "option", "maxDate", tempEndDate);
}

And you could obtain the date objects array from your string array list

var unavailableDates = ["31-5-2014", "1-6-2014", "2-6-2014", "3-6-2014"];

as (Or you could directly define date array object resembling the unavailableDates array ):

//Convert String Date List to Date object List
function convertDisabledFieldToDateObject(diabledList) {
    var dateList = [];
    $.each(diabledList, function (i, singleDate) {
       var parsedDate = $.datepicker.parseDate("dd-mm-yy",singleDate);
        dateList.push(parsedDate);
    });
    //Sort date if the diabled date sets are in jumbled order
    dateList.sort(function(date1, date2){
    return date1 - date2;
      });
    return dateList;
}

Which would be called after initialization of date string array.

Check out this Demo Fiddle

On course of solving this question, i found one interesting question that could be used for solving this problem(could be) :

JQuery Datepicker find next disabled date

score 0 · Answer 3 · answered Dec 06 '17 at 06:34

    var StartDate = $("#start_date").val();
    var EndDates = $("#end_date").val();
    var selectedDate = $("#selected_date").val();

    //-- Start Date Convert in YMD 
    var Sdate = StartDate.split("-");
    var Syear= Sdate[2];
    var Smonth= Sdate[1];
    var Sday= Sdate[0];
    var SYMDDate = Syear + '-' + Smonth + '-' + Sday;
    var newdate= new Date(SYMDDate);
    var StartDateStrToTime=newdate.getTime();

    //-- End Date Convert in YMD
    var Edate = EndDates.split("-");
    var Eyear= Edate[2];
    var Emonth= Edate[1];
    var Eday= Edate[0];
    var EYMDDate = Eyear + '-' + Emonth + '-' + Eday;
    var newdates= new Date(EYMDDate);
    var EndDateStrToTime=newdates.getTime();

    //-- Selected Date Convert in YMD
    var Cdate = selectedDate.split("-");
    var Cyear= Cdate[2];
    var Cmonth= Cdate[1];
    var Cday= Cdate[0];
    var CYMDDate = Cyear + '-' + Cmonth + '-' + Cday;
    var newdateses= new Date(CYMDDate);
    var SelectedDateStrToTime=newdateses.getTime();

    if((SelectedDateStrToTime>=StartDateStrToTime) && (SelectedDateStrToTime<=EndDateStrToTime))
    {}
    else
    {
        alert("Please Select date between "+StartDate+" to " +EndDates+".");
        $("#selected_date").val(EndDates);
    }

How to prevent selecting date range in which there is a disabled date in between?

3 Answers3

Check out this Demo Fiddle

Linked