JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css">
<div id="demo" class="dp-tt-demo">
</div>
JavaScript
$(document).ready(function() {
var today = new Date();
var month = today.getMonth() + 1;
var year = today.getFullYear();
var days = [31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31];
$('#demo').datepicker({
beforeShowDay: function(date) {
var retval = [ false, "" ];
var day = date.getDate();
if ((day % 2) === 0) {
retval[0] = true;
retval[2] = 'Tooltip: ' + date.toString();
}
return retval;
},
hideIfNoPrevNext: true,
maxDate: month + '/' + days[month - 1] + '/' + year,
minDate: month + '/1/' + year,
onSelect: function(date) {
alert('Selected: ' + date);
return true;
}
});
$('div.dp-tt-demo a.ui-state-active').removeClass('ui-state-active');
$('div.dp-tt-demo a.ui-state-highlight').removeClass('ui-state-highlight');
$('div.dp-tt-demo a.ui-state-default').tooltip();
});