JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input>
CSS
.special span {
color: red !important; /* should only apply to may 6 and 8 */
}
.not-special span {
color: green !important;
}
JavaScript
var disabledDates = [
'2015-05-06',
'2015-05-08'
];
$('input').datepicker({
minDate: '4/30/2015',
maxDate: '10/1/2015',
beforeShowDay: function(date){
var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
var minDateArr = $(this).datepicker( "option", "minDate" ).split('/')
var minDate = new Date(minDateArr[2],minDateArr[0]-1,minDateArr[1]);
if ($.inArray(str, disabledDates) != -1){
return [false, 'special']
}
else if(date < minDate ){
return [false, 'not-special']
}
else{
return [true,"special"];
}
}
});