Dynamic Date Selector-Calendar Form ~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

"Submit" button Deactivated and "Reset" button not part of script.

A visually attractive dynamic date selector for form input fields. When the user clicks on a input field, the calendar will pop to let the user easily select a date value to enter.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

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.

D epending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document.

Step One Is to paste a large section of code (three 3 parts) into the <HEAD> section of your document.

A CSS <style> </style> sheet that controls the colors, borders, font, etc. on the calendar itself.
This part can be reconfigured for colors, font, borders etc.
A <table> </table> (Yes, in the <HEAD> section)
A <script type="text/javascript"> </script>

Note Of Importance: on the site you will be getting the code, there is an error on the coding that you will be pasting into the <HEAD> section. Between the <style> </style> sheet and the <table> </table> the code shows closing the </head> section and opening the <body> section. This is error. Remove them!. To clarify this a little more, see below:

Error In Code

</style>
</head>
<body>

<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>

Error Rectified

</style>

<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>

I n other words remove the two words </head> and <body>.

A s we stated earlier, the only reconfigurations that can be made in the <HEAD> section are within the <style> </style> sheet. Just experiment with all the colors, font, font face borders etc. until the calendar has the look and feel that you want. The colors are all defined with 3 digit HEX codes. You can use 6 digit HEX if you prefer but if you want to use the 3 digit, grab the below link and we have a color chart that offers 3 digit HEX coding.
[ Three (3) Digit Hex Codes ]

Step Two Is to paste a section of code into working form within the <BODY> section of the document. In our example (default) it shows two (2) form boxes that will work with the popup calendar. If you only need one (1) form field for this effect see below on the where and howto remove of one of the two form fields.

Default

<form action="" method="post">
<div>
<b>Example Form</b><br/>
Please input a date: <input onclick="ds_sh(this);" name="date" readonly="readonly" style="cursor: text" /><br />
Please input another date: <input onclick="ds_sh(this);" name="date2" readonly="readonly" style="cursor: text" />
<br />
<input type="submit" value="Submit" />
</div>
</form>

Removed Second Form Field

"Submit" button Deactivated.

I n other words, we "Removed Everything That Was Color Coded".

Little Extra Not Included In The Script: If you feel that the code that goes in the <HEAD> section (not including the <style> </style> sheet) is to bulky to be to be on your page, you do have the option to make that section of code into an external .js file where your page won't be so (for a lack of a better word) bloated. For your convenience we took all the work out of converting the <HEAD> section into an external .js file that you can just save as "dynamicSelector.js", upload it to your directory and then paste instead of all that bloated code into your document, a snipplet of code calling the external .js file. Grab the below link to get the converted code you need to make into an external.js file.
[ External.js File ]

For your Information: If you are not sure on howto change the path of the above file you have uploaded as an external .js file, it is fully explained [ Here ]

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained. Since we took most of the work out of making the external .js file, you may or may not need this part of the tutorial.
[ .js File Howto ]

Remember, the <style> </style> sheet is "Not" included in the external.js file. This still will be pasted into the <HEAD> section where you can make your reconfigurations if you want. The <table> </table> and the <script type="text/javascript"> </script> are included in the external.js file. Also, the <BODY> section of the code still gets pasted into an active form. If this is a little confusing (which it can be), view our source code (Well Documented) to see what we are explaining. Below is how we have documented our source for easy identification of the sections of code for this effect.

For your Information: The above coding is located in the <HEAD> section of the document. The below coding is located in the <BODY> section of the document.

W e 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 ]