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 value back to orginal values then it is a valid date.
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>
Have anything to say about this blog? please provide your opinion using
Feedback Form .
Keep Learning,
Srikanth.