age calculation

**zaidmavia** · 03-05-2012, 03:57 PM

hi i m new to programming i need a program for age calculation whch displays years months hours minutes , each must b displayed seperately, n the input method must b shown with examples like how to input the dates, ex dd/mm/yy

Enter your date of birth
Month � Date� Year

You have been living for:
In months:
In weeks:
In days:
In hours:
In minutes:
In seconds:
In Milliseconds:
Your next birthday will be in:

and this program must b embeded in any website by users

**jscheuer1** · 03-05-2012, 06:41 PM

Your date format is ambiguous. You have it two ways in your post. And I think milliseconds are unnecessary, meaningless really as are anything less than days unless the hour, minute, second and millisecond of birth are entered along with the date. But down to seconds are available in the below, so I included them.

So if you're willing to go with mm/dd/yyyy, and skip the milliseconds:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Birthday - Count Up Demo</title>
<style type="text/css">
 #sincebirthday {font: normal 90% verdana, arial, helvetica, sans-serif;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('#birthdate').submit(function(e){
		e.preventDefault();
		if(!/^\d{1,2}\/\d{1,2}\/(\d{2}|\d{4})$/.test(this.elements.thedate.value)){alert('Please Enter Date in mm/dd/yyyy Format!'); return;}
		$('#sincebirthday, #nextbirthdays').countdown('destroy');
		var oldDay = new Date(this.elements.thedate.value), curDay = new Date(), nextDay = new Date(curDay.getTime()), prefix;
		while(nextDay.getMonth() !== oldDay.getMonth() || nextDay.getDate() !== oldDay.getDate()){
			nextDay.setDate(nextDay.getDate() + 1);
		}
		prefix = nextDay.getTime() === curDay.getTime()? "Whoa! It's Your BirthDay! " : '';
		$('#sincebirthday').countdown({
			since: oldDay,
			format: 'YOWDHMS',
			layout:'You have been living for:<br>{yn} {yl}<br>{on} {ol}<br>{wn} {wl}<br>{dn} {dl}<br>{hnn} {hl}<br>{mnn} {ml}<br>{snn} {sl}<br>Since ' +
			oldDay.toLocaleDateString() + '<br>Your next Birthday will be: <span class="prefix">' + prefix + nextDay.toLocaleDateString() + '</span>' +
			' - <span id="nextbirthdays"></span>',
			onTick: function(){
				curDay = new Date(); nextDay = new Date(curDay.getTime());
				while(nextDay.getMonth() !== oldDay.getMonth() || nextDay.getDate() !== oldDay.getDate()){
					nextDay.setDate(nextDay.getDate() + 1);
				}
				prefix = nextDay.getTime() === curDay.getTime()? "Whoa! It's Your BirthDay! " : '';
				$('#sincebirthday .prefix').html(prefix + nextDay.toLocaleDateString());
				if(nextDay.getTime() === curDay.getTime()){
					$('#nextbirthdays').html('Happy BirthDay!');
				} else {
					$('#nextbirthdays').countdown({
						until: nextDay,
						format: 'D',
						layout:'in {dn} {dl}!'
					});
				}
			}
		});
		
	});
});
</script>
</head>
<body>
<h1>jQuery Birthday - Count Up Demo</h1>
<form id="birthdate" action="#">
<fieldset style="width: 10em;"><legend> Enter Birth Date: </legend>
<input style="float:right;" type="submit" value="Go">
<label>mm/dd/yyyy:<br><input type="text" size=7 name="thedate"></label>
</fieldset>
</form>
<div id="sincebirthday"></div>
</body>
</html>

The jquery.countdown.min.js file is available at:

http://keith-wood.name/countdown.html

As part of his jQuery Countdown package (download now button).

Validation of date input is to one or two date numbers, one or two month numbers and two or four year numbers and can can be easily changed if required, as can switching to dd/mm/yyyy or dd/mm/yy format.

BTW, all that's required in the current version (for dates with single digit months and days) is:

m/d/yy

But using:

mm/dd/yyyy

never hurts and will work for all.

**coothead** · 03-06-2012, 01:41 AM

Hi there zaidmavia,

and a warm welcome to these forums.

Unlike John, I am not a javascript expert, but you may like to have a peep
at my little effort, which has some CSS styling that may appeal to you....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Some age information</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
 }
#container {
    width:304px;
    margin:auto;
 }
form {
    padding:10px;
    border:1px solid #999;
    margin-bottom:20px;
    background-color:#fcfcfc;
    box-shadow:#333 4px 4px 10px;
    font-size:75%;
 }
input {
    width:40px;
    margin:0 5px;
    font-family:'courier new',monospace;
 }
#button {
    display:block;
    width:160px;
    margin:5px auto 0;
    font-family:verdana,arial,helvetica,sans-serif;
 }
#info-container {
    padding:10px;
    border:1px solid #999;
    background-color:#fcfcfc;
    box-shadow:#333 4px 4px 10px;
    font-size:75%;
 }
#info-container p {
    margin-left:20px;
 }
#info-container .info {
    margin-left:0;
    font-weight:bold;
 }
.hide {
    display:none;
 }
.red {
    color:#600;
 }
</style>

<script type="text/javascript">
function init(){

   df=document.forms[0];
   df.className='';
   df.reset();
   document.getElementById('info-container').className='hide';
   tmo=null;

df[3].onclick=function() {
if(tmo){
   clearTimeout(tmo);
 }

   by=df[0].value;
   bm=df[1].value-1;
   bd=df[2].value;

if((isNaN(by)||(by==''))||(isNaN(bm)||(bm==''))||(isNaN(bd)||(bd==''))){
   alert('please enter date of birth');
   df.reset();
   return;
 }
if(by<1900){
   alert('please enter the complete year');
   df.reset();
   return;
 }

if((bm>11)||(bd>31)){
   alert('the month should not be greater than 12...\nand the day should, generally, not be greater than 31');
   df.reset();
   return;
 }

  d=0;
  delay=1000;
  pl='days';

  today=new Date();
  yr=today.getUTCFullYear();
  mh=today.getMonth();
  dy=today.getDate();

  then=new Date(by,bm,bd);
  later=new Date(yr,bm,bd);

  ms=Math.floor((today-then));
  ss=Math.floor((today-then)/(1000));
  mm=Math.floor((today-then)/(1000*60));
  hh=Math.floor((today-then)/(1000*60*60));
  dd=Math.floor((today-then)/(1000*60*60*24));
  ww=Math.floor((today-then)/(1000*60*60*24*7.0239));
  mn=Math.floor((today-then)/(1000*60*60*24*29.53059));
  yy=Math.floor((today-then)/(1000*60*60*24*365.2425));
  ld=Math.floor((later-today)/(1000*60*60*24));

if(ld<0){
   later=new Date(yr+1,bm,bd);
   ld=Math.floor((later-today)/(1000*60*60*24)+1);
 }
  countup();
 }
}

function countup() {

   document.getElementById('mil').firstChild.nodeValue=ms+d*1000;
   document.getElementById('sec').firstChild.nodeValue=ss+d;
   document.getElementById('min').firstChild.nodeValue=mm+Math.floor(d/60);
   document.getElementById('hrs').firstChild.nodeValue=hh+Math.floor(d/(60*60));
   document.getElementById('day').firstChild.nodeValue=dd+Math.floor(d/(60*60*24));
   document.getElementById('wks').firstChild.nodeValue=ww+Math.floor(d/(60*60*24*7));
   document.getElementById('mth').firstChild.nodeValue=mn+Math.floor(d/(60*60*24*29.53059));
   document.getElementById('yrs').firstChild.nodeValue=(yy+Math.floor(d/(60*60*24*365.2425))).toFixed();

if(ld==1){
   pl='day';
 }
if(ld==0){
   document.getElementById('info1').firstChild.nodeValue='Your next birthday is:';
   document.getElementById('lday').firstChild.nodeValue='tomorrow';
   document.getElementById('d1').firstChild.nodeValue='';
   document.getElementById('yrs').firstChild.nodeValue=(yy+Math.floor(d/(60*60*24*365.2425)-1)).toFixed();
 }
else {
   document.getElementById('lday').firstChild.nodeValue=ld+Math.floor(d/(60*60*24));
   document.getElementById('d1').firstChild.nodeValue=pl;
 }
   document.getElementById('info-container').className='';
   d++;
   tmo=setTimeout(function(){countup()},delay);
 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="container">

<form action="#" class="hide">
<div>
<label>year:<input type="text"></label>
<label>month:<input type="text"></label>
<label>day:<input type="text"></label>
</div><div>
<input id="button" type="button" value="birthday information">
</div>
</form>

<div id="info-container" class="hide">
<p class="info">You have been living for: </p>
<p><span id="mil">&nbsp;</span> milliseconds.</p>
<p><span id="sec">&nbsp;</span> seconds.</p>
<p><span id="min">&nbsp;</span> minutes.</p>
<p><span id="hrs">&nbsp;</span> hours.</p>
<p><span id="day">&nbsp;</span> days.</p>
<p><span id="wks">&nbsp;</span> weeks.</p>
<p><span id="mth">&nbsp;</span> months - ( lunar ).</p>
<p><span id="yrs">&nbsp;</span> years.</p>
<p class="info">Your next birthday will be in: </p>
<p><span id="lday">&nbsp;</span> <span id="d1">&nbsp;</span>.</p>
<p class="info">Note:</p>
<p class="red">The year is 365.2425 days.</p>
<p class="red">The lunar month is 29.53059 days</p>
</div>

</div>

</body>
</html>

coothead

Thread: age calculation

Thread Tools

Search Thread

age calculation

Bookmarks

Bookmarks

Posting Permissions