<html>
<head>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
.wrapper {
padding: 10px;
}
td.red span.ui-state-default {
color: #f00;
}
td.green span.ui-state-default {
color: #0f0;
}
td.yellow span.ui-state-default {
color: #700;
}
</style>
<script type="text/javascript">
$(function() {
$('input').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0,
beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
});
});
function noWeekendsOrHolidaysOrBlockedDates(date)
{
//var noWeekend = jQuery.datepicker.noWeekends(date);
return setHoliDays(date);
}
// set holidays function which is configured in beforeShowDay
function setHoliDays(date)
{
var day = date.getDay();
if(day == 5 || day == 6)
return [false, ''];
if(date.getDate() == 11 || date.getDate() == 23)
return [ false, 'holiday red', 'Red!' ];
if(date.getDate() == 12 || date.getDate() == 22)
return [ false, 'holiday green', 'Green!' ];
if(date.getDate() == 24)
return [ false, 'holiday yellow', 'all ready booked!' ];
return [true, ''];
}
</script>
</head>
<body>
<div class="wrapper">
<input type="text" id="b">
</div>
</body>
</html>
If you want to add more date then you can add in the setHoliDays function as showing in above example.
You can download from here
No comments:
Post a Comment