Recently, I had a request from a client to have a datepicker that restricts dates based on the start date. Using Jquery Datepicker, I created a TO and FROM date, where by:

• The Start date must be 14 days or more from today
• The End date must be 7 days after the start date
• The End date can only be maximum 28 days from today

To do this, I created two fields, one for the start date, one for the end date, then JQUERY did the rest.

To start, download JQUERY UI from here and include it in your project.

<label for="suspstartDatePicker">Start Date</label>
<input type="text" id="suspstartDatePicker" name="suspendfrom" class="form-control-lg" placeholder="Suspend start date">

<label for="suspendDatePicker">End Date</label>
<input type="text" id="suspendDatePicker" name="suspendto" class="form-control-lg" placeholder="Suspend end date">
                       

Then I added Jquery UI Datepicker in the footer of the page, below the JQUERY UI js script.

<script>
$("#suspstartDatePicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
minDate: '+14',
 
 
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
var limit = $(this).datepicker('getDate');
 
date.setDate(date.getDate() + 7); // Add 7 days
limit.setDate(limit.getDate() + 35); // Add 7 + 28 days
 
 
 
$("#suspendDatePicker").datepicker("option", "minDate", date);
$("#suspendDatePicker").datepicker("option", "maxDate", limit);
 
 
$('#suspendDatePicker').val('');
}
});
 
$("#suspendDatePicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
multidate: true,
 
});	
</script>				

Hope this helps!