| JavaScript - ezCalendar |
The ezCalendar gives you the ability to have a customized date selector on your website. The calendar is extremely simple to set up and is easy to use. This dynamic JavaScript tool, along with images, is less than 10 KB in size (9.61 KB). Check out the following example:
The following form is to be used to enter data for software that was paid for by our company, Goog Inc. Please make sure that your start date is before the end date.
What about the code? Well, you may view the source if you would like. The code is short, sweet, and to the point. Just so you know, the ID of the start date's textbox is txtStartDate. The ID of the end date's textbox is txtEndDate. Taking this into account, I used jPaq 2.0 beta (similar to jQuery) to setup the calendars for the appropriate textboxes once the page loaded:
// Set up the two calendars once the DOM is ready to be accessed.
$(function() {
// Create the calendar for the start date. The calendar also makes sure that
// this date can't exceed the value in the end date's textbox.
new ezCalendar($id("txtStartDate", 0), {
endLimit : function(){return new Date($id("txtEndDate", 0).value);}
});
// Create the calendar for the start date. The calendar also makes sure that
// this date can't exceed the value in the end date's textbox.
new ezCalendar($id("txtEndDate", 0), {
startLimit : function(){return new Date($id("txtStartDate", 0).value);}
});
});
FYI, calling the $(...) function with a function as the parameter causes the function to execute as soon as the DOM is ready to be modified. The $id(...) function selects the element in the document with the specified ID. Zero is passed in as the second parameter so that only the requested element will be returned (and not the element inside of a jPaq object).
If you would like to try this code out, you may download this ZIP file and extract the contents. If you would like to see more examples, you may examine those found in the examples folder. If you have Visual Studio 2008 or higher, you can reference the vsdoc file and the you will see what each function does and how to use each function. If you don't have Visual Studio 2008 or higher, you can still read through the vsdoc file. This file is a skeletal version of ezCalendar.js, with XML comments that provide a summary, the parameters, and the returns for each function.
© 2010 Christopher West. Powered by jPaq.