Adding Multiple Custom jquery datepicker Fields On One Page

By admin

Those who are not familiar with the datepicker plugin for jquery, it’s basically a module that allows to easily display a custom calendar within your HTML form. The plugin allows developers to play around with its options that allow to modify many feautures of the calendar. For the full list and description of all options please visit the jQuery page. The most important feature in my case was the beforeShowDay option which allows to turn off (grey out) some specific dates that you don’t want user to select, for example weekends. This is the basic use of the datepicker plugin with the beforeShowDay with the start date set for the next business day:

<script type="text/javascript">
var disabledDays = ["1-15-2012"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) { if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
$.ajaxSetup ({
cache: false
});

$('.datepicker:not(.ui-datepicker)').live('click',function(){
$(this).datepicker({
minDate: new Date(),
maxDate: new Date('', '', ''),
dateFormat: 'yy-mm-dd',
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
}).focus();
return false;
});
</script>

It works smoothly. If I want to have just one calendar on the page I can use PHP to create a custom calendar and paste the dates here: var disabledDays = [<? echo $my_disabled_dates?>];.

However, what if  we want to display multiple date fields, each with our calendar plugin and each with different disabled days? It becomes a problem because our javascript code runs only once and we don’t modify anything on the fly using ajax or php in this case.
My idea to solve this issue is very easy. I decided to use simple php code to prepopulate the values. At first I need to pass some values from the input field  to one of the functions. I decided to use the jquery call back and names of the fields:

$('.datepicker:not(.ui-datepicker)').live('click',function(){
$(this).datepicker({
minDate: new Date(),
maxDate: new Date('', '', ''),
dateFormat: 'yy-mm-dd',
constrainInput: true,
beforeShowDay: function(date) { return noWeekendsOrHolidays(date,this.name); }
}).focus();
return false;
});

So, our noWeekendsOrHolidays will pass the name of the field. Next, the noWeekendsOrHolidays looks like this:

function noWeekendsOrHolidays(date, arg1) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date,arg1) : noWeekend;
}

So, I just passed the arg1 (name of the field) to the nationalDays which will handle our requests:

function nationalDays(date,type) {
if (type == 'EXM_trial_implementation_date') {
var disabledDays = ["1-15-2012","1-16-2012"];
} else if (type == 'one_trial_implementation_date'){
var disabledDays = ["1-19-2012","1-20-2012"];
} else if (type == 'two_trial_implementation_date'){
var disabledDays = ["1-30-2012","1-31-2012"];
} else if (type == 'three_trial_implementation_date'){
var disabledDays = ["2-15-2012","2-16-2012"];
} else if (type == 'four_trial_implementation_date'){
var disabledDays = ["3-15-2012","3-16-2012"];
}
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}

and of course, the var disabledDays = ["3-15-2012","3-16-2012"]; we can pre-populate using php.

Good luck!

Share

Share your thoughts