JSFiddle - React, Tailwind, and code Playground
HTML
<div id="datepicker"></div>
CSS
td.highlight {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow:hidden;
}
td.highlight a {
background: #99dd73 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
JavaScript
var disabledDays = ["2014-2-5", "2013-9-13", "2013-9-28"];
var tips = ['aaa', 'bbb', 'ccc'];
$("#datepicker").datepicker({
showButtonPanel: false,
firstDay: 1,
dateFormat: 'yy-mm-dd',
beforeShowDay: function (date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
//return [false];
return [true, 'highlight', tips[i]];
}
}
return [true];
}
});