Figuring out the JQuery UI plugin
Posted: June 03, 2011 in Web Design
I've been working on the website for Jessica's new dance company, and I'm at the part where customers register for classes. Since I'm building the site using ColdFusion (otherwise I'd be working on it until the end of time), I had a few options for how to let customers pick their class date.
1. form text field
How lazy can I be, right?
Advantage: Mindlessly easy to set up
Drawbacks: Not very user friendly, not to mention having to deal with typos, formatting (6/3 vs 6-3), and how to block off weekends and holidays
2. ColdFusion datefield
This is the type="datefield" version of cfinput
Advantage: Neat calendar box popup. Easy to force formatting.
Drawbacks: No good way to block off dates, and IE likes to position the clicker around 100 pixels into outer space.
3. ColdFusion's <cfcalendar>
Advantage: Ability to block off dates
Drawback: Couldn't get the silly thing to work at all on my shared host.
So I went with option #4. The JQuery UI Datepicker plugin. This (once I figured out how to set it up, which was like figuring out how trig works by looking at an equation) gave me endless options, like the ability to block off weekends and certain dates (holidays, our vacations, etc) and even set the earliest available booking date. I was even able to integrate some ColdFusion code into it.
Voila! (this is a modified version of Christopher Altman's mod)
$(document).ready(function (){
var d = new Date();
var natDays = [
[7,4,<cfoutput>#year#</cfoutput>]
,[1,1,<cfoutput>#year#</cfoutput>]
,[12,31,<cfoutput>#year#</cfoutput>]
,[1,19,<cfoutput>#year#</cfoutput>]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#datepicker").datepicker({
minDate: '<cfoutput>#dateformat(dateadd("d",2,now()),"mm/dd/yyyy")#</cfoutput>',
maxDate: '+2Y',
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
Now what could be cooler than that?
Add Comment
< Back to blog