Today is . Page created 06/05/07

Calendar Date Constructor Form Construction

Day: Month: Year:
Date:

Create a date in one field from 3 drop down menus (day/month/year). This is useful when needing to submit a date to a database in a valid format from one field.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in IE 7.0, Opera 9.21 and AOL Explorer 1.5. In all other platforms this effect would not work.

For Your Information 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 two (2) part copy and paste code that goes in both the <HEAD> (no reconfigurations) and <BODY> sections (incorporated into a working form) of your document. For all intensive purposes, the only possible reconfiguration would be to add more years into the Year option values. Just follow the pattern and add as many as you require.

<!------ Default <BODY> Section ------>              

Year:
<select name="year" onChange="makedate()">
<option value="2001" selected>2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>

Notice in the column on the right how we followed the pattern and added more than the default years. What ever year you want to appear upon opening just add the attribute of selected into that option value.

<!------ Reconfigured <BODY> Section ------>

Year:
<select name="year" onChange="makedate()">                
<option value="1991" selected>1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>

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 ]   Digg It!