Check date in javascript

Article published on January 31, 2006 under Scripting

Programmers very often needs to validate informations inserted into forms and to check their correctness is useful take advantage from javascript. This tutorial will explain how to use javascript in order to verify if a date is valid or not.

Dates in forms are inserted in two different ways, the first uses a text field where user type data following different patterns (in this tutorial we assume that dates are in dd-mm-yyyy format); the second uses instead pulldown menus. The first solution is more simple to carry out, but is subject to more errors by users (for example inserting invalid characters or more frequent typing dates in a format different from the one that have been planned).

Suppose now that we have the following text field in which we want to insert a date in dd-mm-yyyy format:

<form id="test_form" action="get" method="/checkdatejavascript" 
   onsubmit="return(check_form(this)); return false;">
   <input type="text" name="datefield" id="datefield" />
</form>

To check the correctness of inserted data we will use the check_form function:

function check_form()
{
   // Regular expression used to check if date is in correct format
   var pattern = new RegExp([0-3][0-9]-(0|1)[0-9]-(19|20)[0-9]{2});
   if(document.getElementById('datefield').value.match(pattern))
   {
      var date_array = document.getElementById('datefield')
                       .value.split('-');
      var day = date_array[0];

      // Attention! Javascript consider months in the range 0 - 11
      var month = date_array[1] - 1;
      var year = date_array[2];

      // This instruction will create a date object
      source_date = new Date(year,month,day);

      if(year != source_date.getFullYear())
      {
         alert('Year is not valid!');
         return false;
      }

      if(month != source_date.getMonth())
      {
         alert('Month is not valid!');
         return false;
      }

      if(day != source_date.getDate())
      {
         alert('Day is not valid!');
         return false;
      }
   }
   else
   {
      alert('Date format is not valid!');
      return false;
   }

   return true;
}

As we can see, the regular expression evidenced in blue is use to control if inserted date follows or not the default assigned format. If the pattern is valid then function proceed to the next step otherwise an error message is raised abd form is not sent (the regular expression guarantees moreover that date cannot be empty).

To validate the date we will use the Date object offered by javascript. (check the code evidenced in red). The algorithm is pretty simple. Using the informations inserted by user we will create a Date object and using the methods getFullYear, getMonth and getDate we will produce three values representing respectively the year, the month and the day associated to it. If these values are equal to those inserted by user, then the date is correct. Consider now the following examples:

User insert in text field the string 09-01-1976
Date object created from string is 09-01-1976
Date is valid

User insert in text field the string 31-02-2006
Date object created from string is 03-03-2006
Date is not valid

Programmer had to take particular attention (check the code evidenced in green) in the way javascript handles dates, because months are considered in the range from 0 to 11 assuming that o is January and 11 is December.

In case of pulldown menus are used to insert dates, controls are more simple due to the fact that regular expression is not need to validate date format:

<form id="test_form" action="get" method="/checkdatejavascript" 
   onsubmit="return(check_form(this)); return false;">
   <select name="dateday" id="dateday">
      <option value="1">1</option>
         […]
   </select>
   <select name="datemonth" id="datemonth">
      <option value="0">January</option>
         […]
   </select>
   <select name="dateyear" id="dateyear">
      <option value="2006">2006</option>
         […]
   </select>
</form>

The javascript function that will controll date correctness is

function check_form()
{
   var day = document.getElementById('dateday').value;
   var month = document.getElementById('datemonth').value;
   var year = document.getElementById('dateyear').value;

   // This instruction will create a date object
   source_date = new Date(year,month,day);

   if(year != source_date.getFullYear())
   {
      alert('Year is not valid!');
      return false;
   }

   if(month != source_date.getMonth())
   {
      alert('Month is not valid!');
      return false;
   }

   if(day != source_date.getDate())
   {
      alert('Day is not valid!');
      return false;
   }

   return true;
}

Update: I have updated the code, because there was an issue with the regular expression. Thanks to Alex for the advice