CS 601 – JQuery UI Datepicker – Blocking Dates

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.

Leave a Reply

Your email address will not be published. Required fields are marked *