JSFiddle - React, Tailwind, and code Playground
HTML
<p>Start Date:
<input type="text" id="startDatePicker" />
</p>
<p>End Date:
<input type="text" id="endDatePicker" />
</p>
JavaScript
$(document).ready(function(){
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date){
if($('#endDatePicker').val()==""){
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var endDate = new Date(selectedDate.getTime() + 2*secsPerDay);
$("#endDatePicker").datepicker( "option", "minDate", selectedDate );
$("#endDatePicker").datepicker( "option", "maxDate",endDate );
}
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function(date){
if($('#startDatePicker').val()==""){
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var startDate = new Date(selectedDate.getTime());
$("#startDatePicker").datepicker( "option", "minDate", startDate );
$("#startDatePicker").datepicker( "option", "maxDate",selectedDate );
}
}
});
});