Popup Date and Time Picker Calendar Form - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.3 and AOL Explorer1.5

Popup date picker is a JavaScript that makes it easy for your visitors to fill out the date/time field(s) of your form, by selecting the date from a popup calendar. Script allows to save the time for those internet/intranet developers who need intuitive, easy to use client-side timestamp input control.

We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with one (1) variation observed in Netscape8.1.2.

When you click on the little calendar icon to open the calendar, instead of opening a little popup window as defined within the external.js file (width=200,height=250), it opens to a full browser window. We cover these reconfigurations further down under a link of [ Reconfigurations To External.JS File ]
This does not hinder the operation of the effect in any way, shape or form.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is a four (4) part copy and paste code that goes in both the <HEAD> and <BODY> sections (incorporated into a working form) of your document as well as uploading a few images into your directory. It also makes use of an external.js file* you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

* This script has four (4) different external .js files. Two (2) for the European Format and two (2) for the American Format. Our above example shows all four (4) formats.

For your Information: The code for this script is very confusing the way the script site has it set up. The link for [ Run the code ] and [ See the code ] are done as a complete HTML document with more unnecessary material than you will know what to do with. Below, we have removed all the unnecessary material and will show you where and howto reconfigure the code.

The <HEAD> section of the code is basically straight forward. It contains four (4) different external .js files. Two (2) for the European Format and two (2) American Format. It is well documented for you to select which format you will require and which external.js file you will need to upload into your directory. This is the only script (code) you will need for the <HEAD> section.

In other words the only thing you require in the <HEAD> section of your document is one of the four snipplets of code to call one of the (4) external.js files to be uploaded into your directory. If your form requires more than one (1) format, then just upload accordingly.

If you have uploaded one of the external.js files into a directory other than your root or top directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

There are a few reconfigurations to be made within the external.js file (whichever one you need). These reconfigurations are dependent on two things.

If you upload the required images to a directory other than your root or top directory.

Depending on if you want to change the colors within the calendar itself.

Since this is a large code, grab the below link to see where and howto make
these possible reconfigurations within the external.js file.
[ Reconfigurations To External.JS file ]

[ Return Whence You Came ]

The <BODY> section of code which you will be incorporating into a valid form is slightly more involved. There are four (4) separate codes for the four (4) different formats. Each one corresponds to the number (or lack of) the external.js file located in the <HEAD> section. If this is a little confusing, read on, hopefully we can totally clarify this for you.

European Date Format (dd-mm-yyyy)

The below external.js file will be associated with this textarea code
<script language="JavaScript" src="ts_picker.js"></script>




<form name="tstest">
Select Date and Time:<br>
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>

American Date Format (mm/dd/yyyy)

The below external.js file will be associated with this textarea code
<script language="JavaScript" src="ts_picker3.js"></script>




<form name="tstest">
Select Date and Time:<br>
<input type="Text" name="timestamp_am" value="">
<a href="javascript:show_calendar3('document.tstest.timestamp_am', document.tstest.timestamp_am.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>



Select Date and Time:

The below external.js file will be associated with this textarea code
<script language="JavaScript" src="ts_picker4.js"></script>




<form name="tstest">
Select Date:<br>
<input type="Text" name="date_am" value="">
<a href="javascript:show_calendar4('document.tstest.date_am', document.tstest.date_am.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a>



Select Date:

On the above how the coresponding number (or lack of) 2, 3 or 4 is associated with each individual code. Each specific textarea calls a specific externsl.js file. This is because each external.js file is slightly different in order to use the correct format for each textarea. Also notice the cal.gif. This is one of the images* you need to upload into your directory and change the path if you have it in any other directory other than your "Root" or top directory.

Point Of Information If you notice in the above, the form has a specific name <form name="tstest"> and is also used within the textarea code. If you are going to change the name of the form, then you need to reflect this in all the above color coded sections or you will get an error message in the task bar and the popup calendar will " Not " appear and you will wonder why. If this is slightly unclear, see the below example.

Default

<form name="tstest">
Select Date:<br>
<input type="Text" name="date_am" value="">
<a href="javascript:show_calendar4('document.tstest.date_am', document.tstest.date_am.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a>

Reconfigured

<form name="tstest6">
Select Date:<br>
<input type="Text" name="date_am" value="">
<a href="javascript:show_calendar4('document.tstest6.date_am', document.tstest6.date_am.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a>

Notice in the above how we followed the pattern in renaming the form. We changed the opening form name and also changed the name in two (2) places within the code itself.

* The zip file that you will be downloading will contain thirteen (13) images. In all actuality, you will only need to upload three (3). All the others are of no consequence are are not needed. To the right are the little icon images you will need to upload.

For your Information: The next thing we shall cover is the downloading of the "Zip" file from the script site. The only place you will see anything to download (including the external.js files) is from the link for [ Run the code ]. You will see the below:

Download all versions with demo page in zip archive

The only problem with that is the zip file only contains three (3) external.js files and not the required four (4) as in our example. To rectify this, we have supplied the four (4) external.js files for you to download. Or if you prefer, we have the external.js files along with the <HEAD> and <BODY> sections of code with the three (3) images in a convenient zip file if you so prefer.

[ European Format Date and Time.JS File ]
[ European Format Date.JS File ]
[ American Format Date and Time.JS File ]
[ American Format Date.JS File ]
[ Convenient Zip File ]

The last thing we shall cover is the "Reset" button you see in our example. This is "Not" part of the script. We added it just as a convenience for you as you are checking out the example.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]