The Latest...

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)

<cfset year = dateformat(now(),"yyyy")>
$(document).ready(function (){
  var d         = new Date();
  var natDays   = [

  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() {

      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

Click to reload a new image.

< Back to blog