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 greate

Answer 1

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