Jquery UI Datepicker Change background color Unavailable date
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Change background color Unavailable date</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/start/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<style type='text/css'>
.ui-datepicker td.ui-state-disabled>span{background:#F70C0C;}
.ui-datepicker td.ui-state-disabled{opacity:100;}
</style>
<script type='text/javascript'>//<![CDATA[
var unavailableDates = ["17-10-2015", "18-10-2015", "20-10-2015"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
//]]>
</script>
</head>
<body>
<input id="iDate">
</body>
</html>
Jquery UI Datepicker Change background color Unavailable date
