Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Xin's Popup Calendar
Note: Updated Dec 26, 05' to work in Opera 8.0. Only cal2.js changed.
Description: Xin's Popup Calendar script makes inputting dates into forms as easy as point-and-click. Your user simply selects the date from a popup calendar, and it's automatically entered into the designated form field. This is one of the absolute best script of its kind, with the following noteworthy features:
Step 1: Add the following script to the HEAD section of your webpage:
Step 2: Insert the below sample form to the BODY section of page, which demonstrates how to modify your form to use Xin's Popup Calendar:
Step 3: Finally, the script above accesses two external .js files. Download the below zip file, and upload the .js files "cal2.js" and "cal_conf2.js" to your webpage directory:
Configuring the script
There are a few steps to configuring this script for your own webpage. Here are the skeleton procedures (for more comprehensive documentation, please see "readme.htm" inside the above zip file):
1) All changes to the script are made inside the single file "cal_conf2.js". Open up this file using your favorite text editor, and for each calendar you wish to add, add the line:
addCalendar("Calendar1", "Select Date", "firstinput", "sampleform");
-"Calendar1"- The unique name of your calendar. Can be
anything desired, but must be unique for each calendar.
2) Having defined the above, here's what your form should look like:
The parts in red highlight how you would name your form/form element in response to how you specified addCalendar() above, plus set up the corresponding link to pop up the calendar.
That's it. If you have multiple form elements that need a popup calendar, repeat the above procedures for each case.