Click here to Skip to main content
13,799,720 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 20:10
membersri_kanth4-Dec-07 20:10 
QuestionGetting Values from Drop Down Lists Pin
sri_kanth23-Nov-07 1:51
membersri_kanth23-Nov-07 1:51 
GeneralCheck box to update multiple database entries Pin
thinkers20-Feb-03 21:44
memberthinkers20-Feb-03 21:44 
Generalbug in NetScape 6.1 Pin
Amir Hashem18-Jul-02 9:38
memberAmir Hashem18-Jul-02 9:38 
GeneralRe: bug in NetScape 6.1 Pin
Member 11929657-Dec-04 20:25
memberMember 11929657-Dec-04 20:25 
GeneralA bug Pin
Philippe Lhoste12-Mar-02 2:27
memberPhilippe Lhoste12-Mar-02 2:27 
GeneralRe: A bug Pin
Torsten Mauz12-Mar-02 2:33
memberTorsten Mauz12-Mar-02 2:33 
GeneralRe: A bug Pin
Philippe Lhoste12-Mar-02 4:22
memberPhilippe Lhoste12-Mar-02 4:22 
Wow, fast answer!

As I said, the bug is a classical one, so it was one of the first things I checked Smile | :)

Last note, for implementers:
It can be a good idea to move the initMonths function to the HTML file, in case it has to be localized.
This way, all pages will use the same .js file, but month names will be translated.

Actually, you can leave this function in the .js file (just in case it is not defined in the .html), but override it by redefining it after the call to initDates.
It works at least in IE5.5.

Philippe Lhoste (Paris -- France)
Professional programmer and amateur artist

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
Web02 | 2.8.181207.3 | Last Updated 11 Mar 2002
Article Copyright 2002 by Torsten Mauz
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid