Validating and comparing dates with JavaScript

We often have to take a date from user in a HTML form using three dropdown listboxes for day, month and year.

In the example code, given below, I show how to do the following tasks related to dates.

Initializing dropdown listboxes related to day, month and year dynamically using OnLoad event
Ensuring user selects day, month and year
Validating the date selected by user
Ensuring date selected by user is not after system date

For more information about Date object in JavaScript click here.

The following is a complete HTML form along with JavaScript code to do the tasks mentioned above. You can copy the code into an editior and save the file with .html extension and open it in browser.

<html>
<head>
    <title>Date Validation Demo</title>
    <script language ="javascript" type="text/javascript">
    function init()    
    {
       // add days to day dropdown
       for ( i = 1; i <= 31; i ++)
          djform.day.options[i] = new  Option(i,i);  // add option with value of i for text and value
          
       // add months to month dropdown
       var months = new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
       for ( i = 1; i <= 12; i ++)
          djform.month.options[i] = new  Option( months[i],i);  // month name comes from array and value is i
       // add years to years to dropdown
       curyear =  new Date().getFullYear();  // take current year
       year = curyear - 9;  // go back by 9 years
       // add ten years from current year backwards
       for (i = 1; i <= 10; i ++) {
          djform.year.options[i] = new  Option(year,year);  
          year ++;
       }
         
    } // end of init()
    
    function  compare_date_with_sysdate() 
    {
     day = djform.day.value;  // take day
     if ( day == 0 )
     {
         alert("Please select a valid day!");
         djform.day.focus();
         return false;
     }
     
     month = djform.month.value;  // take month
     if ( month == 0 )
     {
         alert("Please select a valid month!");
         djform.month.focus();
         return false;
     }
     year  = djform.year.value;  // take year
     if ( year == 0 )
     {
         alert("Please select a valid year!");
         djform.year.focus();
         return false;
     }
     // validate date selected by user
     if (!isValidDate(year,month,day)) 
     {
        alert("Date selected by you is not a valid date!");
        return false;
     }
     
     // check whether select date is <= system date
     
     var curdate = new Date(); // get system date
     
     // convert system date to milliseconds from 1-1-1970 using  UTC function of Date object
     curdate_utc = Date.UTC( curdate.getFullYear (), curdate.getMonth(), curdate.getDate(),0,0,0,0);
     
     // convert date selected by user also to milliseconds from 1-1-1970
     dj_utc = Date.UTC( year, month-1, day,0,0,0,0);  // month is 0 to 11 not 1 to 12
     if ( dj_utc > curdate_utc)
     {
         alert("Sorry! Date of joining cannot be after system date!");
         return false;
     }
     return true; // valid date
    }
    
    // Validates the date and returns true if date is valid otherwise false
    function isValidDate(year, month, day) 
    {
       var d = new Date(year,month-1, day);  // month is 0 to 11
       
       // compare the values with original values
       if ( d.getFullYear() != year ||  d.getMonth() != month-1 || d.getDate() != day)
           return false;
       else
           return true;    
    }
    
 </script>
</head>
<body onload="init()">
<h1>Date Validation Demo</h1>
<form action="url" id="djform" onsubmit="return compare_date_with_sysdate()">
Select Date Of Joining : 
<select id="day">
  <option value="0">Day</option>
</select>
<select id="month">
  <option value="0">Month</option>
</select>
<select id="year">
  <option value="0">Year</option>
</select>
<p />
<input type="submit" value="Submit" />
</form>
</body>
</html>