• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

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:

• Customizable date format (ie: y/m/d, m/d/y etc)
• Fully customizable interface (colors, popup window dimensions etc)
• Accommodation for different languages other than English and English calendar format
• Fully cross browser functional- IE4+/Win, IE5+/Mac, NN4x, N6+, Opera6+/Win and Konqueror3/Linux.

Demo:

Directions:

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:

xinpopcalendar.zip

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.
-"Select Date"- The title of the popup window of the calendar. Can be anything desired.
-"firstinput"- The name of the form INPUT field that will use this calendar.
-"sampleform"- The name of your form that contains the above INPUT field.

2) Having defined the above, here's what your form should look like:

<form name="sampleform">
<input type="text" name="firstinput" size=20> <a href="javascript:showCal('Calendar1')">Select Date</a>
</form>

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.