Demo of dependant calendar with start date and end date using JQuery

Date: Start Date
Date: End Date

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>