asked on

Populate Age Field based on Date of Birth Entered

I'm used to doing things on server side, so javascript is a little new to me. Basically I have a need to take an existing text field 'Date Of Birth', in the format of MM/DD/YYYY, and upon entering this information have it populate another text field on the same page (Age, in the format of x Years, x Months, x Days). Date should be calculated against current date, and the 'Age' field should populate immediately after the Date of Birth is entered (after tabbing to next field). I've seen numerous scripts out there, but none that give me back the format that I want.

A working code sample with HTML fields would be appreciated. If possible I'd also prefer that the code be written in such a way that the user NOT get the 'To protect your security IE has restricted this webpage from running scripts that could access your computer' message.

Thanks!

Michel Plungjan

May I ask why you need the months and days - it is NOT trivial to calculate...

If Years are enough then

<script>
function showAge(yyyy,mm,dd, retirement_age) {

var d = new Date(yyyy,mm-1,dd,0,0,0)
alert(d)
var now = new Date();
now.setHours(0,0,0); // normalise
var bDay = new Date(now.getFullYear(),mm-1,dd)

if (bDay < now) alert('On your next birthday you will be '+(now.getFullYear()-d.getFullYear()+1))
else alert('You are '+(now.getFullYear()-d.getFullYear()))

var retire = new Date(d.getTime())
retire.setFullYear(retire.getFullYear()+retirement_age)
alert(retire)
alert('there are ' +(retire.getFullYear()-now.getFullYear()) +' years to your retirement'); // may be negative
}
showAge(1971,10,14,65)
</script>

talphius

ASKER

It's for an form that a doctor's office is utilizing. They frequently have pediatric patients and need to know the detail of how many years, months and, days the patient is as this data affects dosages for treatments, etc. They are calculating this age now in their head, or based off the age that is given to them, but they want a more automated\accurate way to display this.

I could always do this server side once the form is submitted, but they'd like it to display on the form while they are filling it out

-T-

Michel Plungjan

this looks right:
http://snippets.dzone.com/posts/show/623

Please note the months start at 0

<script>
// ---------------------------------------------------------------------------|
// qryHowOld |
// Description: How old someone is in the format: |
// XXX Years XX Months X Weeks X Days |
// Birth Date could be specified like Date.UTC(2002,8,16,17,42,0) |
// |
// Arguments: |
// varAsOfDate: as of date |
// varBirthDate: birth date |
// |
function qryHowOld(varAsOfDate, varBirthDate)
{
var dtAsOfDate;
var dtBirth;
var dtAnniversary;
var intSpan;
var intYears;
var intMonths;
var intWeeks;
var intDays;
var intHours;
var intMinutes;
var intSeconds;
var strHowOld;

// get born date
dtBirth = new Date(varBirthDate);

// get as of date
dtAsOfDate = new Date(varAsOfDate);

// if as of date is on or after born date
if ( dtAsOfDate >= dtBirth )
{

// get time span between as of time and birth time
intSpan = ( dtAsOfDate.getUTCHours() * 3600000 +
dtAsOfDate.getUTCMinutes() * 60000 +
dtAsOfDate.getUTCSeconds() * 1000 ) -
( dtBirth.getUTCHours() * 3600000 +
dtBirth.getUTCMinutes() * 60000 +
dtBirth.getUTCSeconds() * 1000 )

// start at as of date and look backwards for anniversary

// if as of day (date) is after birth day (date) or
// as of day (date) is birth day (date) and
// as of time is on or after birth time
if ( dtAsOfDate.getUTCDate() > dtBirth.getUTCDate() ||
( dtAsOfDate.getUTCDate() == dtBirth.getUTCDate() && intSpan >= 0 ) )
{

// most recent day (date) anniversary is in as of month
dtAnniversary =
new Date( Date.UTC( dtAsOfDate.getUTCFullYear(),
dtAsOfDate.getUTCMonth(),
dtBirth.getUTCDate(),
dtBirth.getUTCHours(),
dtBirth.getUTCMinutes(),
dtBirth.getUTCSeconds() ) );

}

// if as of day (date) is before birth day (date) or
// as of day (date) is birth day (date) and
// as of time is before birth time
else
{

// most recent day (date) anniversary is in month before as of month
dtAnniversary =
new Date( Date.UTC( dtAsOfDate.getUTCFullYear(),
dtAsOfDate.getUTCMonth() - 1,
dtBirth.getUTCDate(),
dtBirth.getUTCHours(),
dtBirth.getUTCMinutes(),
dtBirth.getUTCSeconds() ) );

// get previous month
intMonths = dtAsOfDate.getUTCMonth() - 1;
if ( intMonths == -1 )
intMonths = 11;

// while month is not what it is supposed to be (it will be higher)
while ( dtAnniversary.getUTCMonth() != intMonths )

// move back one day
dtAnniversary.setUTCDate( dtAnniversary.getUTCDate() - 1 );

}

// if anniversary month is on or after birth month
if ( dtAnniversary.getUTCMonth() >= dtBirth.getUTCMonth() )
{

// months elapsed is anniversary month - birth month
intMonths = dtAnniversary.getUTCMonth() - dtBirth.getUTCMonth();

// years elapsed is anniversary year - birth year
intYears = dtAnniversary.getUTCFullYear() - dtBirth.getUTCFullYear();

}

// if birth month is after anniversary month
else
{

// months elapsed is months left in birth year + anniversary month
intMonths = (11 - dtBirth.getUTCMonth()) + dtAnniversary.getUTCMonth() + 1;

// years elapsed is year before anniversary year - birth year
intYears = (dtAnniversary.getUTCFullYear() - 1) - dtBirth.getUTCFullYear();

}

// to calculate weeks, days, hours, minutes and seconds
// we can take the difference from anniversary date and as of date

// get time span between two dates in milliseconds
intSpan = dtAsOfDate - dtAnniversary;

// get number of weeks
intWeeks = Math.floor(intSpan / 604800000);

// subtract weeks from time span
intSpan = intSpan - (intWeeks * 604800000);

// get number of days
intDays = Math.floor(intSpan / 86400000);

// subtract days from time span
intSpan = intSpan - (intDays * 86400000);

// get number of hours
intHours = Math.floor(intSpan / 3600000);

// subtract hours from time span
intSpan = intSpan - (intHours * 3600000);

// get number of minutes
intMinutes = Math.floor(intSpan / 60000);

// subtract minutes from time span
intSpan = intSpan - (intMinutes * 60000);

// get number of seconds
intSeconds = Math.floor(intSpan / 1000);

// create output string
if ( intYears > 0 )
if ( intYears > 1 )
strHowOld = intYears.toString() + ' Years';
else
strHowOld = intYears.toString() + ' Year';
else
strHowOld = '';

if ( intMonths > 0 )
if ( intMonths > 1 )
strHowOld = strHowOld + ' ' + intMonths.toString() + ' Months';
else
strHowOld = strHowOld + ' ' + intMonths.toString() + ' Month';

if ( intWeeks > 0 )
if ( intWeeks > 1 )
strHowOld = strHowOld + ' ' + intWeeks.toString() + ' Weeks';
else
strHowOld = strHowOld + ' ' + intWeeks.toString() + ' Week';

if ( intDays > 0 )
if ( intDays > 1 )
strHowOld = strHowOld + ' ' + intDays.toString() + ' Days';
else
strHowOld = strHowOld + ' ' + intDays.toString() + ' Day';

if ( intHours > 0 )
if ( intHours > 1 )
strHowOld = strHowOld + ' ' + intHours.toString() + ' Hours';
else
strHowOld = strHowOld + ' ' + intHours.toString() + ' Hour';

if ( intMinutes > 0 )
if ( intMinutes > 1 )
strHowOld = strHowOld + ' ' + intMinutes.toString() + ' Minutes';
else
strHowOld = strHowOld + ' ' + intMinutes.toString() + ' Minute';

if ( intSeconds > 0 )
if ( intSeconds > 1 )
strHowOld = strHowOld + ' ' + intSeconds.toString() + ' Seconds';
else
strHowOld = strHowOld + ' ' + intSeconds.toString() + ' Second';

}
else
strHowOld = 'Not Born Yet'

// return string representation
return strHowOld
}
// |
// qryHowOld |
// ---------------------------------------------------------------------------|
alert(qryHowOld(new Date().getTime(), new Date(1972,9,31,17,42,0).getTime())); // 1972/10/31 !!!
alert(qryHowOld(new Date().getTime(), new Date(2004,1,29,0,0,0).getTime())); // 2004/02/29
</script>

talphius

ASKER

This seems to display a security warning to the end user. Is there any way to code this so that they are not required to click allow or add the sites to the trusted sites list?

Also, per my original request, how would this be integrated into a HTML form so that it auto populates an 'Age' field when 'DOB' is entered?

Thanks!

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

or

<form>
<input type="text" name="dob" value="" onBlur="getAge(this.form)" >
<input type="text" name="age" value="">
</form>

talphius

ASKER

This worked perfectly - Thanks!

talphius

ASKER

This worked perfectly - Thanks!