So this can be achieved using java script function, which calculates the age then and there.
Ex:-
In this example I wish to display a text box to user to enter his/her date of birth in “dd/MM/yyyy” format, when cursor focuses out from the date of birth text box automatically the label beneath to the text box has to display the age of the user based upon entered date of birth.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Age</title>
<script type="text/javascript" language="javascript">
function CalAge(obj,lblid)
{
document.getElementById(lblid).innerText="Age";
if(IsValidDate(obj.value)==true)
{
var dt1=obj.value;
var dt=new Date();
var dt2=null;
if( (parseInt(dt.getMonth())+1)<10)
dt2=dt.getDate()+"/0"+(parseInt(dt.getMonth())+1)+"/"+dt.getFullYear();
else
dt2=dt.getDate()+"/"+ (parseInt(dt.getMonth())+1)+"/"+dt.getFullYear();
if(IsValidDate(dt2)==true)
{
GetDateDiff(dt1,dt2,'Date of birth should be lesser than current date',lblid);
}
}
}
function GetDateDiff(dat1,dat2,msg,lblid)
{
var fdts=null;
var tdts=null;
var lbl=document.getElementById(lblid);
if(dat1!='')
{
if(dat1.indexOf(".")!=-1)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
fdts=dat1.split("/");
}
if(dat2!='')
{
if(dat2.indexOf(".")!=-1)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
tdts=dat2.split("/");
}
if(tdts!=null && fdts!=null)
{
if(tdts[2]<=fdts[2])
{
if(tdts[2]<fdts[2])
{
alert(msg);
return false;
}
if(tdts[1]<=fdts[1])
{
if(tdts[1]<fdts[1])
{
alert(msg);
return false;
}
if(tdts[0]<fdts[0])
{
alert(msg);
return false;
}
}
lbl.innerText = "Age : 0";
}
else
{
if(tdts[1]==fdts[1])
{
if(tdts[0]<fdts[0])
{
lbl.innerText ="Age : "+ (parseInt(tdts[2])-parseInt(fdts[2])-1);
return true;
}
if(tdts[0]>=fdts[0])
{
lbl.innerText ="Age : "+ (parseInt(tdts[2])-parseInt(fdts[2]));
return true;
}
}
if(tdts[1]>fdts[1])
{
lbl.innerText ="Age : "+ (parseInt(tdts[2])-parseInt(fdts[2]));
return true;
}
if(tdts[1]<fdts[1])
{
lbl.innerText ="Age : "+ (parseInt(tdts[2])-parseInt(fdts[2])-1);
return true;
}
}
}
}
function IsValidDate(argDate)
{
try
{
var fdts=null;
if(argDate!='')
{
if(argDate.indexOf(".")!=-1)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
fdts=argDate.split("/");
}
if(fdts!=null)
{
if(fdts[1].length!=2)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
if(fdts[0].length!=2)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
if(!isInteger(fdts[2]) || !isInteger(fdts[1]) || !isInteger(fdts[0]))
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
}
else
{
alert('Enter Date');
return false;
}
if(fdts[1]>12)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
if(fdts[1]==2)
{
if(fdts[2]%4==0)
{
if(fdts[0]>29)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
}
else
{
if(fdts[0]>28)
{
alert('--Not a valid Date(dd/mm/yyyy)');
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('--Not a valid Date(dd/mm/yyyy)');
return false;
}
}
if(fdts[1]==4 || fdts[1]==6 || fdts[1]==9 || fdts[1]==11 )
{
if(fdts[0]>30)
{
alert('--Not a valid Date(dd/mm/yyyy)');
return false;
}
}
return true;
}
catch(e)
{
alert('--Not a valid Date(dd/mm/yyyy)');
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>
<table><tr><td>
Enter Date of Birth
</td>
<td><input type="text" id="txtDOB" onfocusout="CalAge(this,'lblAge');"/></td>
</tr>
<tr><td colspan='2'><label id="lblAge" ></label></td>
</tr></table>
</body>
</html>
Output:
 |
No comments:
Post a Comment