Client Side Linked Dynamic Date Boxes

• Download source files - 1.34 Kb
• Download demo project - 1.8 Kb

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.