in css style sheet
use this following css to control the appearance of date being highlight
/* Dates that is available or found in availableDates will be highlight
. Text color - red, background - lime. */
td.highlight, table.ui-datepicker-calendar tbody td.highlight a {
background: none !important;
background-color: #00FF00 !important;
color: #FF0000;
}
<script type="text/javascript">
var availableDates = null;
$(document).ready(function () {
// Datepicker
$('#datepicker').datepicker({
dateFormat: 'yyyy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onSelect: function () {
var month = new Array();
month[0] = "Jan";
month[1] = "Feb";
month[2] = "Mar";
month[3] = "Apr";
month[4] = "May";
month[5] = "Jun";
month[6] = "Jul";
month[7] = "Aug";
month[8] = "Sep";
month[9] = "Oct";
month[10] = "Nov";
month[11] = "Dec";
var day1 = $("#datepicker").datepicker('getDate').getDate();
var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year1 = $("#datepicker").datepicker('getDate').getFullYear();
if (month1.toString().length == 1) {
month1 = "0" + month1.toString();
}
if (day1.toString().length == 1) {
day1 = "0" + day1.toString();
}
var fullDate = year1 + "-" + month1 + "-" + day1;
var DateMMMMFormat = month[$("#datepicker").datepicker('getDate').getMonth()] + " " + day1 + ", " + year1;
//selectedDate.value = fullDate;
LoadSpecificDate(fullDate, DateMMMMFormat);
},
beforeShowDay: AvailableDate
});
$(".calendarIcon").click(function () {
$("#datepicker").datepicker("show");
});
fucntion AvailableDate will handle beforeShowDay event that render each specific in the
DatePicker. in my case, i will highlight all the dates that is found in the availableDates
array and disable the click on those dates are unavailable.
function AvailableDate(date) {
var month1 = (date.getMonth() + 1);
var day1 = date.getDate();
if (month1.toString().length == 1) {
month1 = "0" + month1.toString();
}
if (day1.toString().length == 1) {
day1 = "0" + day1.toString();
}
dmy = date.getFullYear() + "-" + month1 + "-" + day1;
if ($.inArray(dmy, availableDates) == -1) {
return [false, ""];
} else {
return [true, "highlight"];
}
}
});
</script>
this attached image shows dates being highlight if they exist in the AvailableDates array
