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($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || 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;
}
/* 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!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
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.
Nice. But I rarely need jQ. Mootools FTW isn’t it?
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?
@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…
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.
@Douglas Neiner: Sorry, flip the arguments. $.inArray( value, array )
@Douglas Neiner: I’m a complete MooTools nerd — I didn’t even think to check the jQuery API. Will update.
Interesting dilema and solution. My problem with the jQuery Datepicker is figuring out how to store selected start and end dates in a cookie.
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?
@Brad Zickafoose: The code above actually automatically disables today and all previous days.
@David Walsh: oh nice… silly me. :-)
Hi,
This code is nice, very helpful. But I am pretty new to jQuery, in asp.net I use some code to generate the dates in the array but the single digits are formatted with a zero like 01 for January etc. So when my arrays are formatted they use zero and the dates are not being blocked out on the calendar, could anyone advise the best solution so that the code will accept 0x numbers?
Many thanks.
Thanks David!
I built an internal application for my department and I am using the datepicker plugin as well. I don’t think anyone will ever select a day on the weekend. I might as well disable it too.
Oh wait, apparently there’s already a built-in function for removing weekends!
Thanks for the script though.
Hello,
Really nice plugin! Can we do that same with mootools???
Any link??
thanks!!
Thanks for the great plugin. This is the best version of datepicker I found, and I tested many. The blocked dates, and blocked current date are exactly what I needed. It was easy for a beginner like me to implement.
hi, do you know how to take the national days from MySQL database and disable those days on datepicker?? need your help plssssss
How do you edit this to include the current date?
How do you edit this to include todays date?
Please someone write normal Datepicker as Jquery has in Mootools!
First off, great script from what I can understand… I just started to teach myself javascript and I can’t seem to to enable the weekends so I can just make a custom array for the two months i need the calendar for (Fri/Sat in Sept, and our operating schedule in Oct this year)
How would I go about doing this?
yeah i need to include todays date also.. thanks
i created a 2nd textbox and now i have 2 ‘#firstDate’ and ‘#endDate’
i want ‘#endDate’ display dates the same date as #firstDate’ with future dates. Possible? thanks
@Boni: do you want the EndDate has the same that as FirstDate or the EndDate disable the dates before the firstDate??
@Boni: do you want the EndDate has the same that as FirstDate or the EndDate disable the dates before the firstDate?? So, the endDate always bigger than the firstDate.
Wht do i have to do make it to disable dates between “2-21-2010″ and “2-24-2010″?