Calculating a person’s age is a common requirement in many web applications. This tutorial will guide you through the process of creating a simple Javascript Calculate Age In Years, Months Days script. By the end of this guide, you’ll have a functional age calculator that takes a birth date and calculates the age in years, months, and days.
Setting Up the HTML Structure
First, we need to create the HTML structure for our age calculator. This involves creating a form with input fields for the date of birth (day, month, year) and the current date (day, month, year), along with a button to trigger the calculation and elements to display the result.
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Age Calculator</title> </head> <body> <div id="container"> <img src="https://lh6.ggpht.com/wLfwA7MS68Zd2KedA1vCX6-zLqDIUSwBC3W4GzgJaZfOWX2BOlw6mjj0DatL4oII8Q=w300" alt="" /> <form id="form" autocomplete="off"> <h5>All Must Be In Numbers Other Wise We Cannot Calculate.</h5> <label for="date"> Date Of Birth: <input type="text" maxlength="2" size="2" id="date" placeholder="Date" required/> <input type="text" maxlength="2" size="2" id="month" placeholder="Month" autocomplete="on" required/> <input type="text" maxlength="4" size="4" id="year" placeholder="Year" required/> </label> <br /> <br /> <label for="date2"> Today's Date: <input type="text" maxlength="2" size="2" id="date2" placeholder="Date"/> <input type="text" maxlength="2" size="2" id="month2" placeholder="Month"/> <input type="text" maxlength="4" size="4" id="year2" placeholder="Year"/> </label> <br /> <br /> <button id="calbtn">Calculate</button> <br /> <br /> <span id="age"></span> <span id="months"></span> <span id="days"></span> </form> </div>
body {
font-family: courier;
}
#container {
text-align: center;
padding: 20px;
}
#form{
margin-top: 20px;
}
input[type='text'] {
padding: 5px 10px;
border: 1px solid #bdc3c7;
outline: 0;
color: #2980b9;
font-weight: bold;
}
#calbtn {
border: 0;
padding: 10px 20px;
cursor: pointer;
background: #d35400;
color: #f1c40f;
font-size: 20px;
outline: 0;
}
#calbtn:hover, #calbtn:active {
background-color: #c0392b;
outline: 0;
}
span {
display: inline-block;
font-size: 45px;
font-weight: bold;
color: #27ae60;
}
var form = document.getElementById("form"),
bdate = document.getElementById("date"),
bmonth = document.getElementById("month"),
byear = document.getElementById("year"),
date = document.getElementById("date2"),
month = document.getElementById("month2"),
year = document.getElementById("year2"),
age = document.getElementById("age"),
days = document.getElementById("days"),
mons = document.getElementById("months"),
today = new Date();
year.value = today.getFullYear();
month.value = today.getMonth() + 1;
date.value = today.getDate();
form.addEventListener('submit', function(event) {
event.preventDefault();
var by = Number.parseFloat(byear.value),
bm = Number.parseFloat(bmonth.value),
bd = Number.parseFloat(bdate.value),
ty = Number.parseFloat(year.value),
tm = Number.parseFloat(month.value),
td = Number.parseFloat(date.value);
if (td < bd) {
days.innerHTML = (td - bd + 30) + ' days';
tm = tm - 1;
} else {
days.innerHTML = (td - bd) + ' days'
}
if (tm < bm) {
months.innerHTML = (tm - bm + 12) + ' months';
ty = ty - 1;
} else {
months.innerHTML = (tm - bm) + ' months'
}
age.innerHTML = "Age: " + (ty - by) + ' years';
});
