Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

Introduction

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:

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

<TR>
<TD>Date:</TD>
<TD>
<SELECT name=dDay></SELECT>
<SELECT name=dMonth></SELECT>
<SELECT name=dYear></SELECT>
</TD>
</TR>
<TR>
<TD 
colSpan=2>
<INPUT id=submit1 type=submit value=go name=submit1>
</TD>
</TR>
</TABLE>
</FORM> 
<SCRIPT src="cBoxes.js"></SCRIPT>
<SCRIPT>
var d1 = new dateObj(document.fDate.dDay, 
  document.fDate.dMonth, document.fDate.dYear);
initDates(1900, 2002, 1981, 4, 26, d1);
</SCRIPT>
</P>

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.

License

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

Share

About the Author

Torsten Mauz
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
QuestionProblem in Getting Values from the Date DropDown Lists Pinmembersri_kanth4-Dec-07 19:10 
QuestionGetting Values from Drop Down Lists Pinmembersri_kanth23-Nov-07 0:51 
GeneralCheck box to update multiple database entries Pinmemberthinkers20-Feb-03 20:44 
Generalbug in NetScape 6.1 PinsussAmir Hashem18-Jul-02 8:38 
Script doesn't default to the date specified in initDates() method.
GeneralRe: bug in NetScape 6.1 Pinmembernvb7-Dec-04 19:25 
GeneralA bug PinmemberPhilippe Lhoste12-Mar-02 1:27 
GeneralRe: A bug PinmemberTorsten Mauz12-Mar-02 1:33 
GeneralRe: A bug PinmemberPhilippe Lhoste12-Mar-02 3:22 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 11 Mar 2002
Article Copyright 2002 by Torsten Mauz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid