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>