Click here to Skip to main content
13,627,789 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


10 bookmarked
Posted 10 Mar 2002

Client Side Linked Dynamic Date Boxes

, 10 Mar 2002
Rate this:
Please Sign up or sign in to vote.
A script which provides you with a set of linked date boxes which will not allow an invalid date to be selected.


As a web developer who deals often with backends, I know fully well what a pain it is dealing with dates. SQL server has been installed as a US locale, and some of your clients have set their locale to UK or vice versa. If you have server-side validation then not a problem, but if you're like me and prefer to do form validation client-side, this involves a fair amount of code using splits and arrays to determine the format of a date, then you have to paste it back together for submission to the server, also I'm sure if you're like me and are generally doing this coding to time scales, then you always seem to write a bespoke version for each project. Well I got fed up with doing this, so I decided to write a nice generic script for dealing with date boxes. I've always preferred doing dates as dropdown boxes, simply because I think they look better then either a single textbox or three separate boxes. Anyway, enough of the waffle, time to look at how it's used.

The thinking behind this script was always speed of use, i.e. if I can implement a set of date boxes which are validated, or in the case of this script, not requiring any validation, then I can save a lot of time for the more complicated coding. So how do you use it? Easy:

<FORM name=fDate action=dateBoxes.html method=post>

<SELECT name=dDay></SELECT>
<SELECT name=dMonth></SELECT>
<SELECT name=dYear></SELECT>

<INPUT id=submit1 type=submit value=go name=submit1>
<SCRIPT src="cBoxes.js"></SCRIPT>
var d1 = new dateObj(document.fDate.dDay, 
  document.fDate.dMonth, document.fDate.dYear);
initDates(1900, 2002, 1981, 4, 26, d1);

As you can see, implementation is very code light. Let me explain the initDates function. The prototype for this function is: initDates(firstYear, lastYear, selectedYear, selectedMonth, selectedDay, dateObject).

  • firstYear is the earliest year that will appear in the year box.
  • lastYear is the latest year that will appear in the year box.
  • selectedYear is (funnily enough) the currently selected year.
  • selectedMonth is the currently selected month.
  • selectedDay is the currently selected day.
  • dateObject is the custom object which represents the date boxes.

That is all there is to it. I won't go through how the script works, as the source code is quite self-explanatory. All suggestions and CONSTRUCTIVE criticisms are welcome. Enjoy!

Please note that this script is currently IE only, although Netscape 6.2 will probably work as well. If anyone converts this script to work with Netscape as well, then please let me know.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Torsten Mauz
Web Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionProblem in Getting Values from the Date DropDown Lists Pin
sri_kanth4-Dec-07 19:10
membersri_kanth4-Dec-07 19:10 
QuestionGetting Values from Drop Down Lists Pin
sri_kanth23-Nov-07 0:51
membersri_kanth23-Nov-07 0:51 
GeneralCheck box to update multiple database entries Pin
thinkers20-Feb-03 20:44
memberthinkers20-Feb-03 20:44 
Generalbug in NetScape 6.1 Pin
Amir Hashem18-Jul-02 8:38
sussAmir Hashem18-Jul-02 8:38 
GeneralRe: bug in NetScape 6.1 Pin
nvb7-Dec-04 19:25
membernvb7-Dec-04 19:25 
GeneralA bug Pin
Philippe Lhoste12-Mar-02 1:27
memberPhilippe Lhoste12-Mar-02 1:27 
The idea is good, and the implementation is nice.
It will give me hints how to change combo boxes on the fly.

Just one classical pitfall: the rule on leap years is more complex than your implementation. 1900 isn't a leap year.
Instead of just:
//check to see if we are dealing with febuary
if(month == 1)
  //if the year divided by 4 does not contain a decimal place then it is a leapyear
  if((dObj.yearObj.options[dObj.yearObj.selectedIndex].value / 4).toString().indexOf('.') == -1)
    days = arrDays[month] + 1;

//check to see if we are dealing with febuary
if(month == 1)
  var year = dObj.yearObj.options[dObj.yearObj.selectedIndex].value;
  //if the year can be divided by 4 but not by 100, unless it can be divided by 400, then it is a leap year
  if(year % 4 == 0 && (year % 100 != 0 || year % 400 == 0))
    days = arrDays[month] + 1;

BTW, if the indexOf trick is amusing, I doubt it is optimal...

Philippe Lhoste (Paris -- France)
Professional programmer and amateur artist
GeneralRe: A bug Pin
Torsten Mauz12-Mar-02 1:33
memberTorsten Mauz12-Mar-02 1:33 
GeneralRe: A bug Pin
Philippe Lhoste12-Mar-02 3:22
memberPhilippe Lhoste12-Mar-02 3:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180712.1 | Last Updated 11 Mar 2002
Article Copyright 2002 by Torsten Mauz
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid