One of the things I wanted to do is to block certain dates from being enabled in the JQuery UI Datepicker widget. There is built-in functionality for blocking weekends, but not for particular dates, e.g., Christmas. Some web searching led me to a fairly easy solution. The widget has an option for providing a function to call before a date is shown. Here is my widget constructor:
$('#datepicker').datepicker({
inline: true,
showOn: "both",
buttonImage: "/cafemarburg/images/calendar.jpg",
minDate: +1,
maxDate: +180,
beforeShowDay: checkClosedDates
});
checkClosedDates is a function that returns an array of the form [true/false, a class to add, a tooltip message], the last two being optional. It takes the date (as a Javascript object) as a parameter.
Here is the function call:
var closedFullDates = new Array(); // Used for one-time closures or irregular scheduled holidays
var closedYearlyDates = new Array('12-25','7-4'); // Used to regular holidays (e.g., Christmas)
var closedDaysOfWeek = new Array('0')
function checkClosedDates(date) {
var blocked = false;
var ymd = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
var md = (date.getMonth()+1) + '-' + date.getDate();
if ($.inArray(ymd,closedFullDates) > -1) {
blocked = true;
} else if ($.inArray(md,closedYearlyDates) != -1) {
blocked = true;
} else if ($.inArray(String(date.getDay()),closedDaysOfWeek) != -1) {
blocked = true;
}
if (blocked) {
return [false,'dpClosedDate','Sorry, we are closed that day.'];
} else {
return [true];
}
}
As can be seen, I use three separate arrays. One is for one-time events or events that change date year to year. Another is for dates that occur on the same date. The third is for days of the week.
