PBDR.COM

About   -   Contact   -   Purchase   -   Search   -   What's New

 
 
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.

 

Top of Page

Legal Notice

Ken Howe 2011