02-19-2008, 07:54 PM
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.
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 Attach 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:
-"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:
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.
Author: Xin Yang
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.
Step 1: Add the following script to the HEAD section of your webpage:
Code:
<script language="javascript" src="cal2.js"></script>
<script language="javascript" src="cal_conf2.js"></script>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:
Code:
<form name="sampleform">
<input type="text" name="firstinput" size=20> <small><a href="javascript:showCal('Calendar1')">Select Date</a></small>
<p><input type="text" name="secondinput" size=20> <small><a href="javascript:showCal('Calendar2')">Select Date</a></small>
</form>Step 3: Finally, the script above accesses two external .js files. Download Attach 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:
Code:
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:
Code:
<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.
Author: Xin Yang