Validating Date Inputs

Last weeks article on formatting dates using a custom date-time function solved the issue of displaying dates returned from a web server or database, but didn't begin to help the problems encounter inputting dates into a web page. Aside from ensuring region setting are adhered to, there is also the problem of the almost unlimited number of combinations of date formats, such as dd/mm/yyyy, dd.mm.yy, dd-mmm-yy etc.
One the safest solutions is to provide the user with 3 dropdown menus for the day, month & year. However, as always, there's a couple of points to consider:

the day and month dropdown menus will always contain the same options, while the year menu must change in relation to the current date.
the selected day will have to be validated against the month and the year, for leap years.
the 3 menus will need to generate a valid date.

The following script creates the day, month & year dropdowns and populates them, 1 - 31, January - December & (current year - 10 years) to (current year + 10 years) respectively. Also a textbox is added to contain a valid date, determined by the 3 dropdown menus. The year dropdown menu uses the custom date formatting function from last weeks article to retrieve a 4 digit year from the current server date. Notice within each Select tag is an onChange keyword; this is a JavaScript event which calls the calcDate JavaScript function to validate the dropdowns and create the resultant date in the txtdate textbox. This function checks all 3 dropdowns are selected and if so calls the JavaScript validateDate function, which ensures the day dropdown shows a valid number of days for the given month and year. If the validation checks out, then the txtdate textbox is populated by concatenating the values of the 3 dropdowns.

<html>
<head>

<SCRIPT language="JavaScript1.2">
  <!--

function calcDate(frmDate)
   {
   //checks for a valid date
   if (validateDate(frmDate.cboday, frmDate.cbomonth, frmDate.cboyear) == false)
      {
      frmDate.txtdate.value = "";
      alert("Invalid Date" + "\n" + "Please Check!");
      }
   else
      {
      //if all 3 dropdowns aren't "- -" then populate txtdate textbox
      if (frmDate.cboday.selectedIndex != 0 && frmDate.cbomonth.selectedIndex != 0
        && frmDate.cboyear.selectedIndex != 0)
         {
         frmDate.txtdate.value = frmDate.cboday.value + "/" + 
           frmDate.cbomonth.value + "/" + frmDate.cboyear.value;
         }
      else
         {
         frmDate.txtdate.value = "";
         }
      }
   }		

function validateDate(day, month, year)
   //check correct number of day for given month/year
   {
   if (day.selectedIndex != 0 && month.selectedIndex != 0 
     && year.selectedIndex != 0)
      {
      switch(month.value) 
         {
         case "02" :
            //February
            if (year.value == Math.round(year.value / 4) * 4)
	       //leap year
	       {
	       if (day.value > 29)
                  {
                  return false;
                  }
               }
            else
               {
               //non-leap year
               if (day.value > 28)
                  {
                  return false;
                  }
               }
               break;	
         case "04" :
            //April
            if (day.value > 30)
               {
               return false;
               }	
               break;
         case "06":
            //June
            if (day.value > 30)
               {
               return false;
               }	
               break;		
         case "09":
            //September
            if (day.value > 30)
               {
               return false;
               }	
               break;
         case "11":
            //November
            if (day.value > 30)
               {
               return false;
               }	
               break;
         default:
            //date is valid
            return true;
            break;
         }
      }
   }	

  // -->
</SCRIPT>

</head>
<body>
<form name="frmDate">
<select name="cboDay" onChange="calcDate(frmDate);">
<option selected>- -</option>
<%
'populate day dropdown
For intCount = 1 to 31
   response.write "<Option value=""" & intCount & """>" & _
     intCount & "</option>"
Next
%>
</select>

<select name="cbomonth" onChange="calcDate(frmDate);">
'populate month dropdown
<option selected>- -</option>
<Option value="01">January</option>
<Option value="02">February</option>
<Option value="03">March</option>
<Option value="04">April</option>
<Option value="05">May</option>
<Option value="06">June</option>
<Option value="07">July</option>
<Option value="08">August</option>
<Option value="09">September</option>
<Option value="10">October</option>
<Option value="11">November</option>
<Option value="12">December</option>
</select>

<!--#INCLUDE FILE="ConvDate.inc"-->

<select name="cboyear" onChange="calcDate(frmDate);">
<option selected>- -</option>

<%
'populate year dropdown
intYear = ConvDate(Date, "%Y")

for intCount = (intYear - 10) to (intYear + 10)
	response.write "<Option value=""" & intCount & """>" & _
          intCount & "</option>"
next
%>
</select>
<br>
<input type="text" name="txtdate">
</form>
</body>
</html>

The JavaScript functions could be replaced by client-side VBScript if Internet Explorer is the only browser used, otherwise as JavaScript is supported by both Netscape and IE, it makes sense to use this where client-side scripting is required.