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

Answer 2

    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);
    }

Answer 3

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;
        }
    }
}