JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
CSS
td.date-range {
background-color:yellow;
}
td.start-date {
background-color:pink;
}
JavaScript
var hoverDate = null;
var $from = $('#from').datepicker({
onSelect: function (selectedDate, inst) {
$to.datepicker("option", "minDate", selectedDate);
//setTimeout seems to be required otherwise on the next month doesn't work in the end calandar
setTimeout(function () {
$to.datepicker("show");
}, 10);
}
});
var $to = $('#to').datepicker({
beforeShow: function (input, inst) {
//Add a hover event in an attempt to get the date of the hovered element. Would be much better if the
//API provided an event for this.
$('#ui-datepicker-div').on('mouseover.babdatepicker', '.ui-datepicker-calendar td', function (e) {
// not sure why + 1 is required for selectedMonth
var hoverDateStr = ($(this).text() + '-' + (inst.selectedMonth + 1) + '-' + inst.selectedYear);
hoverDate = $.datepicker.parseDate('d-m-yy', hoverDateStr);
$to.datepicker("refresh");
e.stopPropagation();
});
},
// Add classes that illustrate the selected range.
beforeShowDay: function (date) {
var cssClasses = [];
if (isStartDate(date)) {
cssClasses.push('start-date');
}
if (isBetweenStartAndEndDate(date)) {
cssClasses.push('date-range');
}
return [true, cssClasses.join(' '), ''];
},
// Remove the mousover function added with beforeShow
onClose: function (selectedDate, inst) {
$from.datepicker("option", "maxDate", selectedDate);
hoverDate = null;
$('#ui-datepicker-div').off('mouseover.babdatepicker');
}
});
//Called by beforeShowDay for each day in the calendar
function isStartDate(date) {
return getStartDate().getTime() == date.getTime();
}
//Called by beforeShowDay for each day in the calendar
function isBetweenStartAndEndDate(date) {
var endDate = hoverDate || getEndDate();
return date >= getStartDate().getTime() &&...