Demo of dependent calendar with start date and end date using JQuery
How to interlink two Calendars to select start date and end date by user in JQuery UI datepicker
HTML
<div class="col-md-2">Date: Start Date <br> <input type="text" id="date_picker1" size=9></div>
<div class="col-md-2">Date: End Date <br> <input type="text" id="date_picker2" size=9></div>
JQuery
<script>
$(document).ready(function() {
///////
var startDate;
var endDate;
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy'
})
///////
///////
$( "#date_picker2" ).datepicker({
dateFormat: 'dd-mm-yy'
});
///////
$('#date_picker1').change(function() {
startDate = $(this).datepicker('getDate');
$("#date_picker2").datepicker("option", "minDate", startDate );
})
///////
$('#date_picker2').change(function() {
endDate = $(this).datepicker('getDate');
$("#date_picker1").datepicker("option", "maxDate", endDate );
})
////////////////
})
</script>