JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="Datepicker"></div>
<p>
<label><b>Checkin:</b></label> <label id="checkinDate"></label>
<label><b>Checkout:</b></label> <label id="checkoutDate"></label>
</p>
CSS
.dp-highlight .ui-state-default {
background: #484 !important;
color: #FFF !important;
}
.ui-datepicker.ui-datepicker-multi {
width: 100% !important;
}
.ui-datepicker-multi .ui-datepicker-group {
float:none;
}
#datepicker {
height: 300px;
overflow-x: scroll;
}
.ui-widget { font-size: 100% }
JavaScript
/** Display Checkin Datepicker and Checkout DatePicker */
datePicker();
function datePicker(){
$(document).ready(function(){
$( "#Datepicker" ).datepicker({
dateFormat: "MM d, yy",
minDate: 0,
maxDate: "+3M +0D",
beforeShowDay: dateRange,
onSelect: DRonSelect
});
});
}
function dateRange(date){
var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
$(document).ready(function(){
// $("td.dp-highlight").text("Y");
});
return [true, isHighlight ? "dp-highlight" : ""];
}
function DRonSelect(dateText, inst) {
var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
if (!date1 || date2) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#Datepicker").datepicker();
}
else {
if ( $.datepicker.parseDate("MM d, yy", $("#checkinDate").text()) >=
$.datepicker.parseDate("MM d, yy", dateText)) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#Datepicker").datepicker();
}
else {
$("#checkoutDate").text(dateText);
$("#Datepicker").datepicker();
}
}
}