When user enters date in text box and focuses out from it, we can validate the text entered in the text box.
If it is not in valid format we can display an alert box saying invalid date.
If the date is valid but incomplete, then we can complete the date to be in dd/MM/yyyy format.
Valid but not complete means
If user enter dd/MM then on focus out we should make it dd/MM/yyyy(current year)
If user enters dd/MM/yy then on focus out we should make it dd/MM/yyyy
Please copy below html code which includes java script function that auto completes date
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Date format</title>
<script type="text/javascript" language="javascript">
function IsValidDate(argID,msg)
{
try
{
var argDate=document.getElementById(argID).value;
var fdts=null;
if(argDate.length==0)
return true;
if(argDate!='')
{
if(argDate.indexOf(".")!=-1)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
fdts=argDate.split("/");
}
if(fdts!=null)
{
if(fdts[1].length!=2)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
if(fdts[0].length!=2)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
if(fdts.length>2)
{
if(fdts[2].length!=2 && fdts[2].length!=4)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
else
{
var crDt=new Date();
fdts[2]=crDt.getFullYear();
}
if(!isInteger(fdts[2]) || !isInteger(fdts[1]) || !isInteger(fdts[0]))
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
else
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
if(fdts[1]>12)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
var yr=fdts[2];
if(yr.length==2)
{
var crDate=new Date();
var crCtry=crDate.getFullYear();
var pstCnry=crCtry-100;
crCtry=crCtry+' ';
pstCnry=pstCnry+' ';
crCtry=crCtry.substr(0,2);
pstCnry=pstCnry.substr(0,2);
if(yr>=32)
yr=pstCnry+yr;
else
yr=crCtry+yr;
fdts[2]=yr;
}
if(fdts[1]==2)
{
if(fdts[2]%4==0)
{
if(fdts[0]>29)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
else
{
if(fdts[0]>28)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
}
if(fdts[1]==1 || fdts[1]==3 || fdts[1]==5 || fdts[1]==7 || fdts[1]==8 || fdts[1]==10 || fdts[1]==12)
{
if(fdts[0]>31)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
if(fdts[1]==4 || fdts[1]==6 || fdts[1]==9 || fdts[1]==11 )
{
if(fdts[0]>30)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
document.getElementById(argID).value=fdts[0]+'/'+fdts[1]+'/'+fdts[2];
return true;
}
catch(e)
{
alert(msg);
document.getElementById(argID).value='';
document.getElementById(argID).focus();
return false;
}
}
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
</script>
</head>
<body>
<input type="text" id="txtDate" onfocusout="return IsValidDate('txtDate','Please enter valid date');"/>
</body>
</html>
Output:-
When user enters Invalid date Entering 31 st for april (31/04) Entering in valid date format |
 |
Auto complete When user enters 30/04 then on focus out it changes to 30/04/2009 (current year) |
Auto complete When user enters 30/04/09 then on focus out it changes to 30/04/2009 (current year) |
 |
3 comments:
Fantastic job ! I love it, this is just what I needed. Thanks a lot!
thanks for ur comments
Nice :)
but it doesn't work on firefox
Post a Comment