jQuery UI DatePicker: Disable Specified Days

One project I’m currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI’s DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here’s the jQuery javascript I used to accomplish that.

The jQuery Javascript

/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

/* utility functions */
function nationalDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
	for (i = 0; i < disabledDays.length; i++) {
		if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
			return [false];
		}
	}
	//console.log('good:  ' + (m+1) + '-' + d + '-' + y);
	return [true];
}
function noWeekendsOrHolidays(date) {
	var noWeekend = jQuery.datepicker.noWeekends(date);
	return noWeekend[0] ? nationalDays(date) : noWeekend;
}

/* taken from mootools */
function ArrayIndexOf(array,item,from){
	var len = array.length;
	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
		if (array[i] === item) return i;
	}
	return -1;
}
/* taken from mootools */
function ArrayContains(array,item,from){
	return ArrayIndexOf(array,item,from) != -1;
}

/* create datepicker */
jQuery(document).ready(function() {
	jQuery('#date').datepicker({
		minDate: new Date(2010, 0, 1),
		maxDate: new Date(2010, 5, 31),
		dateFormat: 'DD, MM, d, yy',
		constrainInput: true,
		beforeShowDay: noWeekendsOrHolidays
	});
});

The base code is taken from this forum post. You’ll note that I created an array of dates in string format which also accommodates for comparing year.

I’d like to see jQuery UI implement a standard way of disabling days. Their DatePicker is very nice though so I can’t complain too much!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

jQuery UI DatePicker: Disable Specified Days

Related posts:

1. PHP Function – Calculating Days In A Month
2. dwImageProtector Plugin for jQuery
3. Using Opacity to Show Focus with jQuery
4. Adding Days To Dates In MySQL
5. Disable Right Click Using MooTools 1.2

View full post on David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else

No related posts.