How to validate date in JavaScript?
Following example shows you how to validate date in JavaScript as a client side validation.
In some cases you may want to validate date and time in your web applications. In such cases you can use javascript to validate date and time. In here this JavaScript checks the user input is in valid date format. It checks DD-MM-YYYY date format and MM-DD-YYYY date formats. First you have to select a date format. Then enter date in given text box and press validate button. If your input date is in correct format the JavaScript tells you that the input date is in correct format. Otherwise it gives an error message telling you that your input date is not in the correct format.
Demo- Validate Date using JavaScript.
Try it!
| JavaScript Date Validator | ||
| Select date format | view code | |
| Enter Date | ||
| (*Use "-" or "/" as date separator. eg. 07-11-2009 of 12/12/2009) | ||
Try it!
1. Example code for validate date using JavaScript.
JavaScript Code<script type="text/javascript" language="javascript">
<!--
<!--
function dateValidate(){
var inputDate = document.getElementById("txtDateValidate").value;
var dateFormat = document.getElementById("selectDateFormat").value;
var dateValidateRegExp1 = /^\d{2}\/\d{2}\/\d{4}$/;
var dateValidateRegExp2 = /^\d{2}-\d{2}-\d{4}$/;
var dateSplitterIndex = 0;
var isValidDate = 0;
var dateErrorMessage = "Invalid date format.\nDate format should be "+
(dateFormat==1?"MM-DD-YYYY":"DD-MM-YYYY")+
"\nPlease correct and submit again.";
var inputDate = document.getElementById("txtDateValidate").value;
var dateFormat = document.getElementById("selectDateFormat").value;
var dateValidateRegExp1 = /^\d{2}\/\d{2}\/\d{4}$/;
var dateValidateRegExp2 = /^\d{2}-\d{2}-\d{4}$/;
var dateSplitterIndex = 0;
var isValidDate = 0;
var dateErrorMessage = "Invalid date format.\nDate format should be "+
(dateFormat==1?"MM-DD-YYYY":"DD-MM-YYYY")+
"\nPlease correct and submit again.";
isValidDate+=match_count(inputDate,dateValidateRegExp1);
if(isValidDate>0){
dateSplitterIndex=0;
}else{
isValidDate+=match_count(inputDate,dateValidateRegExp2);
if(isValidDate>0){
dateSplitterIndex=1;
}
}
dateSplitterIndex=0;
}else{
isValidDate+=match_count(inputDate,dateValidateRegExp2);
if(isValidDate>0){
dateSplitterIndex=1;
}
}
if(isValidDate==0){
alert(dateErrorMessage);
return false;
}
var dateSplitter="-";
var dateSplitters=Array("/","-");
var monthNames=Array("January","February","March","April",
"May","June","July","August","September",
"October","November","December");
alert(dateErrorMessage);
return false;
}
var dateSplitter="-";
var dateSplitters=Array("/","-");
var monthNames=Array("January","February","March","April",
"May","June","July","August","September",
"October","November","December");
var dmy = inputDate.split(dateSplitters[dateSplitterIndex]);
var month,day,year = 0;
//MM-DD-YYYY DD-MM-YYYY
switch(parseInt(dateFormat)){
case 1:{
month= dmy[0];
day = dmy[1];
year = dmy[2];
}break;
case 2:{
month= dmy[1];
day = dmy[0];
year = dmy[2];
}break;
}
var month,day,year = 0;
//MM-DD-YYYY DD-MM-YYYY
switch(parseInt(dateFormat)){
case 1:{
month= dmy[0];
day = dmy[1];
year = dmy[2];
}break;
case 2:{
month= dmy[1];
day = dmy[0];
year = dmy[2];
}break;
}
if(month>=1 && month<=12){
if(!(day>=1 && day<=31)){
alert("Please enter valid date (1-31)");
return false;
}
}else{
alert("Month should be 1-12 "+month +" is invalid");
return false;
}
if(year%4==0){
if(month==2){
if(day>29){
alert("February can't have more than 28 days except in a leap year");
return false;
}
}else{
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}
}else{
if(month==2){
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}else{
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}
}
if(!(day>=1 && day<=31)){
alert("Please enter valid date (1-31)");
return false;
}
}else{
alert("Month should be 1-12 "+month +" is invalid");
return false;
}
if(year%4==0){
if(month==2){
if(day>29){
alert("February can't have more than 28 days except in a leap year");
return false;
}
}else{
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}
}else{
if(month==2){
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}else{
if(!checkDaysOfTheMonth(month,day)){
alert(monthNames[month-1]+" can't have "+day+" days");
return false;
}
}
}
alert("Date you have entered is valid!");
return true;
}
/*--------------------------------------------------------*/
function checkDaysOfTheMonth(month,day){
return true;
}
/*--------------------------------------------------------*/
function checkDaysOfTheMonth(month,day){
var daysOfMonth = Array();
daysOfMonth[0] = Array(1,31);
daysOfMonth[1] = Array(2,28);
daysOfMonth[2] = Array(3,31);
daysOfMonth[3] = Array(4,30);
daysOfMonth[4] = Array(5,31);
daysOfMonth[5] = Array(6,30);
daysOfMonth[6] = Array(7,31);
daysOfMonth[7] = Array(8,31);
daysOfMonth[8] = Array(9,30);
daysOfMonth[9] = Array(10,31);
daysOfMonth[10] = Array(11,30);
daysOfMonth[11] = Array(12,31);
for(var i=0;i<daysOfMonth.length;i++){
if(i==(month-1)){
if(!((day>=1) && (day<=daysOfMonth[i][1]))){
return false;
}else{
return true;
}
}
}
}
daysOfMonth[0] = Array(1,31);
daysOfMonth[1] = Array(2,28);
daysOfMonth[2] = Array(3,31);
daysOfMonth[3] = Array(4,30);
daysOfMonth[4] = Array(5,31);
daysOfMonth[5] = Array(6,30);
daysOfMonth[6] = Array(7,31);
daysOfMonth[7] = Array(8,31);
daysOfMonth[8] = Array(9,30);
daysOfMonth[9] = Array(10,31);
daysOfMonth[10] = Array(11,30);
daysOfMonth[11] = Array(12,31);
for(var i=0;i<daysOfMonth.length;i++){
if(i==(month-1)){
if(!((day>=1) && (day<=daysOfMonth[i][1]))){
return false;
}else{
return true;
}
}
}
}
/*--------------------------------------------------------*/
function match_count(str,regEx){
if(regEx.test(str)){
return 1;
}else{
return 0;
}
}
function match_count(str,regEx){
if(regEx.test(str)){
return 1;
}else{
return 0;
}
}
-->
</script>
</script>
Html Code
<html>
<head>
<title>How to validate date using JavaScript </title>
</head>
<body>
<table border="0">
<tr>
<td align="right"> Select date format </td>
<td align="left">
<select name="selectDateFormat" id="selectDateFormat">
<option value="1">MM-DD-YYYY</option>
<option value="2">DD-MM-YYYY</option>
</select>
</td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="right" valign="top">Enter Date </td>
<td align="left">
<input name="txtDateValidate" type="text" id="txtDateValidate" />
</td>
<td align="left">
<input name="btnDateValidation" type="submit" id="btnDateValidation" value="Validate" onclick="javascript:dateValidate();" />
</td>
</tr>
</table>
</body>
</html>
