Wednesday, January 27, 2010

jQuery UI DatePicker: Disable Specified Days

jQuery UI DatePicker: Disable Specified Days

Written by David Walsh on Tuesday, January 26, 2010


jQuery Calendar Picker

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  	});  });
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1/* create an array of days which need to be disabled */
2var 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"];
3
4/* utility functions */
5function nationalDays(date) {
6 var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
7 //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
8 for (i = 0; i < disabledDays.length; i++) {
9 if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
10 //console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
11 return [false];
12 }
13 }
14 //console.log('good: ' + (m+1) + '-' + d + '-' + y);
15 return [true];
16}
17function noWeekendsOrHolidays(date) {
18 var noWeekend = jQuery.datepicker.noWeekends(date);
19 return noWeekend[0] ? nationalDays(date) : noWeekend;
20}
21
22/* taken from mootools */
23function ArrayIndexOf(array,item,from){
24 var len = array.length;
25 for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
26 if (array[i] === item) return i;
27 }
28 return -1;
29}
30/* taken from mootools */
31function ArrayContains(array,item,from){
32 return ArrayIndexOf(array,item,from) != -1;
33}
34
35/* create datepicker */
36jQuery(document).ready(function() {
37 jQuery('#date').datepicker({
38 minDate: new Date(2010, 0, 1),
39 maxDate: new Date(2010, 5, 31),
40 dateFormat: 'DD, MM, d, yy',
41 constrainInput: true,
42 beforeShowDay: noWeekendsOrHolidays
43 });
44});

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!


-->
Premium Wordpress Themes

Follow via RSS Epic Discussion

Commenter Avatar January 26 / #
Mark says:

I have to admit, I wish Mootools came with such a wide variaty of UI plugins…

All and all, I think you accomplished your goal very well! Good stuff.

Reply
Commenter Avatar January 26 / #
Salih Gedik says:

Nice. But I rarely need jQ. Mootools FTW isn’t it?

Reply
Commenter Avatar January 26 / #
Simeon says:

Nice post! Can be easily expanded by populating he “disabledDays” using PHP to find all weekends, holidays, etc. I wonder what the performance impact is though if you span across several years as a typical selection might allow?

Reply
Commenter Avatar January 26 / #
Savageman says:

@mark: you should try this Mootools DatePicker (also works for time): http://www.monkeyphysics.com/mootools/script/2/datepicker

Doesn’t have a beforeShowDay option though…

Reply
Commenter Avatar January 26 / #

I would remove all the MooTools helpers :) and just use the jQuery native $.inArray function:

Change this line: ArrayContains(disabledDays,(m+1) + ‘-’ + d + ‘-’ + y) to this instead: $.inArray(disabledDays,(m+1) + ‘-’ + d + ‘-’ + y) != -1

Then you don’t need to two other functions from MooTools.

Reply
Commenter Avatar January 26 / #

@Douglas Neiner: Sorry, flip the arguments. $.inArray( value, array )

Reply
David Walsh January 26 / #

@Douglas Neiner: I’m a complete MooTools nerd — I didn’t even think to check the jQuery API. Will update.

Reply
Commenter Avatar January 26 / #

Interesting dilema and solution. My problem with the jQuery Datepicker is figuring out how to store selected start and end dates in a cookie.

Reply
Commenter Avatar January 26 / #
Brad Zickafoose says:

Is it possible to have the DatePicker block out today’s date as well as past dates from being selected, only allowing tomorrow and future dates available for selection?

Reply

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

via davidwalsh.name

Posted via web from brandontruong's posterous

Posted by Unknown at 3:39 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)