$("#datepicker").datepicker({
beforeShowDay: highlightSpecialDay
});
function highlightSpecialDay(date) {
var spDay = new Date(2012, 3, 7);
if (date.toDateString() == spDay.toDateString()) {
return [true, 'specialDay'];
}
return [true, ''];
}
<div class="demo">
<input type="text" id="datepicker" />
</div>
</br>
<p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/how-to-highlight-special-days-in-the-datepicker-dropdown/"</a> JQFaq Question</b></font></p>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%;border:none;" />
td.specialDay .ui-state-default
{
background-image: url('greenBG.png');
}
External resources loaded into this fiddle: