Demo with event start and end date selection in a single calendar with fixed duration using JQuery
HTML
<div class="col-md-2">Date: Start & End Date <br> <input type="text" id="date_picker1" size=9>
<br><br><input type=button id=b1 value=Reset>
</div> <div class="col-md-8"><div id=msg></div></div>
JQuery
<script>
$(document).ready(function() {
///////
var startDate;
var endDate;
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy'
})
///////
var startDate
$('#date_picker1').change(function() {
if(startDate == null ){
startDate = $(this).datepicker('getDate');
maxDate = $(this).datepicker('getDate','+15d');
maxDate.setDate(maxDate.getDate() + 15);
$("#date_picker1").datepicker("option", "maxDate", maxDate );
$("#date_picker1").datepicker("option", "minDate", startDate );
$("#msg").html("Start date : " + startDate);
}else{
endDate = $(this).datepicker('getDate');
$("#msg").append("<br>End date : " + endDate);
}
///////////
})
////Reset button ///
$('#b1').click(function(){
$('#date_picker1').val("");
$('#date_picker1').datepicker('option', {minDate: null, maxDate: null});
startDate=null;
$("#msg").html("");
})
////////////////
})
</script>