Restrict datepicker based on another datepicker Input

How to Restrict date in datepicker based on another datepicker or textbox in JQuery

    

$('#inputFieldID').datepicker("setDate", new Date());

• setDate Function is used the set the Current Date in the Input field which have the ID Name as #inputFieldID. 

• date-date-format ="yyyy/mm/dd"    You can set the date Format directly in the input field like this.

     <input type="text" data-date-format="yyyy/mm/dd" name="dateto" />

Some Basic Points to Remember while Using jQuery Datepicker function and attribute.

• changeMonth and changeYear in jQuery

By default changeMonth and changeYear is false. Main purpose of using changeMonth and change year is to render the Month and Year in drop down list instead of text

For Example

$("#date1").datepicker({
 dateFormat: 'dd-mm-yy', 
 changeMonth: true, 
 changeYear: true,
});

• minDate and maxDate in jQuery

By default minDate and maxDate value is Null. How to define the jQuery minDate and maxDate

Case A:   If the value is set to 0 in jQuery Datepicker for both min and max Date. It will disable the future and past Date. It will keep active only Current Date.

For Example

$("#date1").datepicker({
 dateFormat: 'dd-mm-yy', 
 minDate: 0,   // disable all the future Dates in jQuery Picker. 
 maxDate: 0,   // disable all the past Date apart from current date.
});

Case B :  minDate and maxDate value in jQuery can be set as any Number.

minDate : -2,  // disable all the past date except two date from the current Date.
maxDate: 2,   // disable all the future date except two date from the current Date.

minDate : -1m,  // disable all the month calendar except past one month from the current Date.
maxDate: 1m,   // disable all the future month except one month from the current date.

maxDate : " +2m +10d",  // +2m +10d means 2 month 10 Days, disable all future Date Except this.
minDate : "10",                // disable all the past date except 10 Days from Current Date.

$("#date1").datepicker({
 dateFormat: 'dd-mm-yy', 
 changeMonth: true, 
 changeYear: true,
 maxDate: '0', 
 inline: true,   
 yearRange: "-1:+0",
 minDate:'dateToday',
 defaultDate: new Date(),
 
});

Some prefix we can use for defining the parameter in jQuery, See below for your Reference.

• y - year (two digits)
• yy - year (four digits)
• m - month (no leading zero)     //  dateFormat:"yy/mm/dd"  , dateFormat: "y/m/d" 
• mm - month (two digits)
• d - day (no leading zero)
• dd - day (two digits)
• 
  
• D - short day name 
• DD - long day name 
• M - short month name 
• MM - long month name 

Code sample is below which can be customized based on the Input text field.

$("#date1").datepicker({
            dateFormat: "dd-mm-yy",
   maxDate : 0,
            onSelect: function (date) {
                var dtVar1 = $('#date1').datepicker('getDate');
                var dtVar2 = $('#date2').datepicker('getDate');
 
                $('#date2').datepicker('option', 'minDate', dtVar1);
            }
        });
        $('#date2').datepicker({
            dateFormat: "dd-mm-yy",
   maxDate : 0,
            minDate: $('#date1').datepicker('getDate'),
            onClose: function () {
                var dtVar1= $('#date1').datepicker('getDate');
                var dtVar2= $('#date2').datepicker('getDate');     
                if (dtVar2 <= dtVar1) {
                    var minDate = $('#date2').datepicker('option', 'minDate');
                    $('#date2').datepicker('setDate', minDate);
                }
            }
        });  
 });