JS check for valid date format

Solution 1:

see http://internotredici.com/article/checkdateinjavascript/ for a helpful article on checking the time - just what you want!

below is full text of article

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

Solution 2:

If using moment.js is ok, you can check http://momentjs.com/docs/#/parsing/string-format/ for date-time parsing utilities. For example:

moment("29/02/2014 11:45", "DD/MM/YYYY hh:mm", true).isValid()

Solution 3:

If you dont want to use other external libraries you can use the following function :

var validateDate = function(dateTime){
  var f_date = dateTime.split(" ")[0].split("/").reverse().join("/");
  var time = dateTime.split(" ")[1];

  var date = dateTime.split(" ")[0].split("/").map(function(c, i, a){
        return parseInt(c);
    });
  var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
  if ( (!(date[2] % 4) && date[2] % 100) || !(date[2] % 400)) {
    console.log("inside");
    daysInMonth[1] = 29;
  }

  if(date[0] > 0 && (date[0] <= daysInMonth[(date[1]-1)]) && date[1] > 0 && date[1] <= 12){
    return new Date(f_date + " " + time) != "Invalid Date";
  }
  return false;
}

This will take care of leap year variations also. This function will work only if the input is in the format dd/mm/YYYY hh:ii. You can try some sample inputs like this:

validateDate("29/2/2000 12:30"); // Should return true
validateDate("29/2/2001 12:30"); // Should return false
validateDate("32/8/2000 12:30"); // Should return false
validateDate("30/11/2000 12:30"); // Should return true
validateDate("31/4/2000 12:30"); // Should return false
validateDate("15/7/2000 12:77"); // Should return false