Demo with event start and end date selection in calendar with Maximum duration limit using JQuery
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() {
endDate = $(this).datepicker('getDate');
endDate.setDate(endDate.getDate() + 15);
$("#date_picker2").datepicker("option", "maxDate", endDate );
$("#date_picker2").datepicker("option", "minDate", $(this).datepicker('getDate') );
})
///////
$('#date_picker2').change(function() {
startDate = $(this).datepicker('getDate');
startDate.setDate(startDate.getDate() - 15);
$("#date_picker1").datepicker("option", "minDate", startDate );
$("#date_picker1").datepicker("option", "maxDate", $(this).datepicker('getDate') );
})
////////////////
})
</script>