10+ JavaScript Age Calculator Examples

This post contains a total of 10+ JavaScript Age Calculator Examples with Source Code. All these Age Calculators are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Age Calculator Examples

1. Simple Age calculator

Made by Foolish Developer. Source

<html>
<head>
	<title></title>
  <style media="screen">
    body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #2782e3;
	font-size: 15px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
}
* {
	box-sizing: border-box;
}
.container{
	width:520px;
	height: auto;
	margin: 100px auto;
	background-color: #eee;
 
	border-radius: 5px;
}
.base{
	width: 100%;
	 
	margin: 0;
	overflow: hidden;
	display: block;
	float: none;
}
.block{
	width: 135px;
	padding: 5px 20px;
 
	margin-left: 20px;
	display: inline-block;
	float: left;
}
.base h4{
	font-size: 26px;
	text-align: center;
	font-family: sans-serif;
	font-weight: normal;
  margin-top: 0px;
  box-shadow: 0px 2px #bababa;
  background: white;
  font-size: 34px;
	color: navy;
}
 
.title{
	font-size: 20px;
	text-align: left;
	font-family: sans-serif;
	font-weight: normal;
	line-height: 0.5;
	letter-spacing: 0.5px;
	word-spacing: 2.7px;
	color: #1073d0;
}
input[type=text] {
	width: 140px;
	margin: auto;
	outline: none;
  min-height: 50px;
	border: 2px solid #1073d0;
	padding: 12px;
	background-color: #f7f7f7;
    border-radius: 2px;
    color: #1073d0;
    font-size: 17px;
}
input[type=text]:focus{
	background-color: #ffffff;
	border: 2px solid orange;
	outline: none;
}
input[type=button]{
	width: 150px;
	margin-left: 35%;
  margin-top: 40px;
	outline: none;
	border: none;
	border-radius: 2px;
	background-color: #0761b6;
	color: #ffffff;
	padding: 14px 16px;
	text-align: center;
  
	font-size: 16px;
}
input[type=button]:hover{
	background-color: #003669;
}
 
#age{
	display: block;
	margin: 10px;
  margin-top: 35px;
	padding: 10px;
  padding-bottom: 20px;
	overflow: hidden;
	font-family: verdana;
	font-size: 23px;
	font-weight: normal;
	line-height: 1.5;
	word-spacing: 2.7px;
	color: navy;
}
  </style>
</head>
<body>

<div class="container">
  <form>
  	<div class="base">
  		<div class="enter">
  		<h4>Age Calculator</h4>
  	</div>
  <div class="block">
  	<p class="title">Date</p>
  	<input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
  	<p class="title">Month</p>
    <input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
  	<p class="title">Year</p>
    <input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />
  </div>
  </div>
  <div class="base">
  	<div class="enter">
    <input type="button" name="submit" value="Submit" onclick="age()" />
    </div>
  </div>
    <div id="age"></div>
  </form>
</div>
<script>
  function age() {
  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  if(d1 > d2){
  	d2 = d2 + month[m2 - 1];
  	m2 = m2 - 1;
  }
  if(m1 > m2){
  	m2 = m2 + 12;
  	y2 = y2 - 1;
  }
  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';
}
</script>
</body>
</html>

2. Age Calculator in Days

Made by Mo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700;800;900&display=swap');

* {
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#ffffff, #e5e5e5);
}

.container {
  background: linear-gradient(black, #14213d);
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: 5px 5px 0 0 #fca311;
}

h1{
  color: white;
  font-size: 1.6rem;
  position: relative;
  z-index: 0;
}

h1:before {
  content: '';
  width: 100%;
  height: 6px;
  background-color: #fca311;
  position: absolute;
  bottom: 4px;
  left: 0;
  z-index: -1;
}

form {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.1rem;
  margin-top: 40px;
}

label {
  margin-top: 15px;
  color:white;
}

input {
  text-align: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
}

button {
  padding: 8px 20px;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 1rem;
  background-color: #fca311;
  border: none;
  transition: 0.4s;
  color: #14213d;
}

button:hover {
  transform: scale(1.1);
  cursor: pointer; 
}

p {
  margin-top: 40px;
  color: white;
  background-color: #000000;
  padding: 10px 30px;
  font-size: 1.3rem;
  border-radius: 8px;
  display: none;
}

span {
  font-weight: 600;
  color: #fca311;
  font-size: 1.5rem;
}
</style>
</head>
<body>
  <div class="container">
  <h1>Age Calculator in Days</h1>
  
    <label for="birth">Your Birth Date</label>
    
    <input type="date" name="birth" id="birth" required>
    <button id="submit">Calculate</button>

  <p id="result"></p>
</div>
      <script>
let submit = document.getElementById("submit");
let result = document.getElementById("result");

submit.addEventListener("click", () => {
  let birth = new Date(document.getElementById("birth").value);
  let dateNow = new Date();

  if (birth.getTime()) {
    let difference = dateNow.getTime() - birth.getTime();
    let inDays = Math.floor(difference / (1000 * 3600 * 24));
    result.style.display = "block";
    result.innerHTML = `Your Age is <span>${inDays}</span> days`;
  }
});
    </script>
</body>
</html>

3. Pet Age Calculator

Made by Talabi Olabode. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css'>
<style>
*{
            margin: auto;
            padding: 15px;
        }
        .ro{
            align-items: center;
            justify-content: center;
            align-content: center !important;
            text-align: center;
            color: white;
            font-weight: 400;
            font-size: 15px;
        }
        .pi{
            font-size: 45px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-weight: 600 !important;
            border: 5px solid #D2D2D2 !important;
            border-radius: 25px;
            background: white;
            
        }
        #HAge{
            align-items: center;
            text-align: center;
            color: black;
            background-color: white;
            border-radius: 20px;
        }
        .crab{
           background: #292929;
           border-radius: 26px;
        }
        body{
            background: #000;
        }
        #button{
             border-radius: 15px;
        }
</style>
</head>
<body>
  <div class="container">

        <div class="crab">
            <div class="card-panel center-align pi">Pet Age</div>
            <input class="white black-text" type="text" name="" id="HAge" placeholder="Enter Human Age">
            <div class="ro">
                
                <div class="row">
                <div class="col s12 m6">
                    <div class="card-panel blue"><h5>Dog Years</h5><div id="aja"></div></div>
 </div>
 <div class="col s12 m6">
 <div class="card-panel green" ><h5>Cat Years</h5><div id="cat"></div></div></div>
 <div class="col s12 m6">
 <div class="card-panel teal" ><h5>Horse Years</h5><div id="horse"></div></div></div>
 <div class="col s12 m6 ">
 <div class="card-panel red" ><h5>Rabbit Years</h5>
  <div id="rabbit"></div></div>
  </div>
</div>
<input type="button" value="Reset Fields" id="button" onclick="clr()" class="black white-text">
 </div>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js'></script>
      <script>
const HAge = document.querySelector('#HAge');
HAge.addEventListener('input', function (p) {
  let age = p.target.value;
  document.querySelector('#aja').innerHTML = age * 7 + ' Years Old';
  document.querySelector('#cat').innerHTML = age * 5.2 + ' Years Old';
  document.querySelector('#horse').innerHTML = age * 6 + ' Years Old';
  document.querySelector('#rabbit').innerHTML = age * 7 + ' Years Old';
});
function clr() {
  document.getElementById('HAge').value = '';
  document.getElementById('cat').innerHTML = null;
  document.getElementById('horse').innerHTML = null;
  document.getElementById('rabbit').innerHTML = null;
  document.getElementById('aja').innerHTML = null; /*using '' instead of null will work as well*/
}
    </script>
</body>
</html>

4. Age Calculator Basic

Made by Hùng Võ. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
#main_container {
    width: 400px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    font-family: sans-serif;
    border-radius: 20px;
    border: 3px solid #999;
}

#birth_date_input, #age_container {
    text-align: center;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

#age_container {
    margin: 40px 5px;
    padding: 20px;
    border-radius: 50px;
    border: 1px solid #000;
    font-weight: bolder;
    background: #EEE;
    font-size: 20px;
    line-height: 40px;
}

#calculate {
    cursor: pointer;
    text-align: center;
    width: 200px;
    padding: 5px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #999;
    border-radius: 10px;
    background: #FFD119;
	background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}

#calculate:hover {
	background: -moz-linear-gradient(top, #E6B800, #FFD119);
    margin-top: 13px;
    height: 25px;
    box-shadow: 0 -5px inset;
}

#calculate:active {
    background: #403300;
    padding-top: 10px;
    height: 20px;
    box-shadow: 0 5px #000 inset;
}

#age {
    padding: 5px;
    border: 3px dashed #AAA;
}
</style>
</head>
<body>
  <div id="main_container">
    <div id="birth_date_input">Birth Date: <input type="date" id="birth_date"></div>
    <br />
    <div id="calculate">Calculate your age</div>

    <div id="age_container"><span id="exact_age">Age</span></div>

  </div>
      <script>
$(document).ready(function () {
  $("#calculate").click(function () {
    var mdate = $("#birth_date").val().toString();
    var yearThen = parseInt(mdate.substring(0, 4), 10);
    var monthThen = parseInt(mdate.substring(5, 7), 10);
    var dayThen = parseInt(mdate.substring(8, 10), 10);

    var today = new Date();
    var birthday = new Date(yearThen, monthThen - 1, dayThen);

    var differenceInMilisecond = today.valueOf() - birthday.valueOf();

    var year_age = Math.floor(differenceInMilisecond / 31536000000);
    var day_age = Math.floor(differenceInMilisecond % 31536000000 / 86400000);

    if (
    today.getMonth() == birthday.getMonth() &&
    today.getDate() == birthday.getDate())
    {
      alert("Happy B'day!!!");
    }

    var month_age = Math.floor(day_age / 30);

    day_age = day_age % 30;

    if (isNaN(year_age) || isNaN(month_age) || isNaN(day_age)) {
      $("#exact_age").text("Invalid birthday - Please try again!");
    } else {
      $("#exact_age").html(
      'You are<br/><span id="age">' +
      year_age +
      " years " +
      month_age +
      " months " +
      day_age +
      " days</span> old");

    }
  });
});
    </script>
</body>
</html>

5. Age Calculator with Calender

Made by AlejandroCruz. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
#datepicker{
   display:inline-block;
  margin:0 auto;
}
h1{
  @media:760px{
    height:100%;
  }
}
footer{
  
  text-align:center;
  position:fixed;
  bottom:0;
  width:100%;
}

body{
  
 background:#6699ff;
}

.fa-arrow-down{
  

    
}
/*h1{
  text-align:center;
  height:100%;
}*/

#labels{
  font-size:20px;

}
.test{
  
  text-align:center;
}
.center {
 
  
  
}


.ll-skin-santiago {
	font-size: 120%;
}

.ll-skin-santiago .ui-widget {
	font-family: Helvetica Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
}

.ll-skin-santiago .ui-datepicker {
	padding: 0;
}

.ll-skin-santiago .ui-widget-content {
	border: none;
	background: #fff;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.19);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.19);
	box-shadow: 0 1px 3px rgba(0,0,0,.19);
}

.ll-skin-santiago .ui-datepicker-header {
	font-family: "Myriad Pro", sans-serif;
	color: #fff;
	padding: 0;
	border-top: 1px solid #b42b0c;
	border-bottom: none;
	overflow: hidden;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 rgba(0,0,0,.35);
	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzMmIwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NkMzAwYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: -o-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: -webkit-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
}

.ll-skin-santiago .ui-datepicker-header .ui-state-hover {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-title {
	line-height: 2.2em;
	font-weight: normal;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-prev, 
.ll-skin-santiago .ui-datepicker .ui-datepicker-next {
	top: -1px;
	background: #d33e13;
	border-radius: 0;
	font-weight: normal;
	border: none;
	height: 2.2em;
	width: 1.4em;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ll-skin-santiago .ui-datepicker .ui-datepicker-next.ui-state-hover {
	background: #ba2c0c;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-prev {
	left: 0;
	border-right: 1px solid #a6280b;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-next {
	right: 0;
	border-left: 1px solid #a6280b;
}

.ll-skin-santiago .ui-datepicker .ui-datepicker-prev span, 
.ll-skin-santiago .ui-datepicker .ui-datepicker-next span {
	margin-top: -4px;
	top: 40%;
}

.ll-skin-santiago .ui-icon-circle-triangle-e {
	background-image: url(images/ui-icons_ffffff_256x240.png);
	background-position: -32px 0;
}

.ll-skin-santiago .ui-icon-circle-triangle-w {
	background-image: url(images/ui-icons_ffffff_256x240.png);
	background-position: -96px 0;
}

.ll-skin-santiago .ui-datepicker table {
	margin: 0;
}

.ll-skin-santiago .ui-datepicker th {
	padding: .6em 0 .4em;
	text-transform: uppercase;
	color: #bbb;
	font-family: "Myriad Pro";
	font-weight: normal;
	font-size: .8em;
	border-top: 1px solid #e6e6e6;
}

.ll-skin-santiago .ui-datepicker td {
	border: none;
	border-top: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	padding: 0;
}

.ll-skin-santiago td:last-child {
	border-right: 0;
}

.ll-skin-santiago td .ui-state-default {
	background: transparent;
	border: none;
	color: #2b2b2b;
	margin: 0;
	font-family: "Myriad Pro", sans-serif;
	font-weight: normal;
	text-align: center;
}

.ll-skin-santiago .ui-datepicker-calendar .ui-state-hover {
	background: #ededed;
	color: #b2b2b2;
}

.ll-skin-santiago td a.ui-state-active,
.ll-skin-santiago td a.ui-state-active.ui-state-hover {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.45);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzMmIwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NkMzAwYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: -o-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: -webkit-linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
	background-image: linear-gradient(bottom, #b32b0b 0%, #cd300c 100%);
}
</style>
</head>
<body>
  <div class="test">
  
    <h1>Cuanto Tiempo ha vivido?</h1>

    <div id="datepicker" class="ll-skin-santiago" ></div>

  <div id="labels">
   
  <label id="timeElapsed"></label>
    <label id="espVida"></label>
  </div>
    
<footer></footer>

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
      <script>
$(document).ready(function () {
  $("#datepicker").hide().delay(1000).fadeIn();
  //$("#datepicker").fadeIn("10s");
  $("footer").html(moment().format('MMMM Do YYYY, h:mm:ss a'));



  $("#datepicker").datepicker({ changeMonth: true, changeYear: true, yearRange: "-100:+0",



    onSelect: function () {
      var dt = new Date();
      var currentMonth = dt.getMonth() + 1;
      var currentDay = dt.getDate();
      var currentYear = dt.getFullYear();
      var currDate = currentMonth + "/" + currentDay + "/" + currentYear;








      var day1 = $("#datepicker").datepicker('getDate').getDate();
      var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;
      var year1 = $("#datepicker").datepicker('getDate').getFullYear();
      var fullDate = month1 + "/" + day1 + "/" + year1;
      var formattedDate = $("#datepicker").datepicker('getDate');

      var dateT = new Date(fullDate);
      //Moment.js stuff
      //var diff1 =  currDate.diff(formattedDate,"days");
      var nMinutos = moment().diff(fullDate, "minutes");
      var nDias = moment().diff(fullDate, "days") + " Dias";
      var nMeses = moment().diff(fullDate, "months");
      var nAños = moment().diff(fullDate, "years");

      function conMeses() {
        var mNumber = "1/1/" + moment().format("YYYY");
        return moment().diff(mNumber, "months");
      }

      function conDias() {
        var nDias = moment().format("MM") + "/" + "1" + "/" + moment().format("YYYY");
        return moment().diff(nDias, "days");
      }








      //HTML Change  




      $('#timeElapsed').html("Usted tiene: " + nAños + " Años con " + conMeses() + " Meses y " + conDias() + " Dias." + "<br>" + "Equivalente a: " + nMeses + " Meses" + "<br>" + "Equivalente a: " + nDias + "<br>" + "Equivalente a: " + nMinutos + " Minutos" + "<br>");

      $("#labels").effect("slide", "slow");
    } });






});


/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester ([email protected]). */
(function (factory) {
  if (typeof define === "function" && define.amd) {

    // AMD. Register as an anonymous module.
    define(["../widgets/datepicker"], factory);
  } else {

    // Browser globals
    factory(jQuery.datepicker);
  }
})(function (datepicker) {

  datepicker.regional.es = {
    closeText: "Cerrar",
    prevText: "&#x3C;Ant",
    nextText: "Sig&#x3E;",
    currentText: "Hoy",
    monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
    "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
    "jul", "ago", "sep", "oct", "nov", "dic"],
    dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
    dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
    dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
    weekHeader: "Sm",
    dateFormat: "dd/mm/yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "" };
  datepicker.setDefaults(datepicker.regional.es);

  return datepicker.regional.es;

});
    </script>
</body>
</html>

6. How Old Are You

Made by Rob. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{

  max-width: 320px;
  margin: 0 auto;
  padding: 2em 3em;

  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 16px;

  background: #fff;
  color: #333;

  text-align: center;

}

input[type="date"]{

  width: 100%;
  padding: .5em 1em;

  font-family: inherit;

  background: #f5f5f5;
  border: 1px solid #ccc;

  text-transform: uppercase;

}

input[type="submit"]{

  margin: 1em 0;
  padding: .5em 2em;

}
</style>
</head>
<body>
  <form name="age-calculator">
    		
  <label><h3>Select Your Birthday</h3></label>
  <input type="date" name="birthday" />
  <input type="submit" value="Calculate" />

  <span id="result"></span>

</form>
      <script>
window.addEventListener("load", function () {
  document.querySelector("input[name=birthday]").addEventListener("change", function (e) {
    document.getElementById("result").innerHTML = "";
  });


  document.getElementsByTagName("form")[0].addEventListener("submit", function (e) {

    e.preventDefault();

    var dateParts = document.querySelector("input[name=birthday]").value.split("-");

    var startDate = new Date(dateParts[0], dateParts[1], dateParts[2]);
    var endDate = new Date();

    var days = Math.floor((startDate - endDate) / 86400000 * -1);

    document.getElementById("result").innerHTML = "<h4>You Are " + days + " Days Old!</h4>";

  });

});
    </script>
</body>
</html>
 

7. Modern Age Calculator

Made by Ali Alaa Eldin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
            font-family: 'Century Gothic', sans-serif;
            text-transform: capitalize
        }

        .parent {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .parent h1 {
            color: #0c0a5d;
            font-size: 50px;
            text-align: center;
            text-transform: capitalize;
        }

        .parent input {
            padding: 8px 4px;
            font-size: 18px;
            font-family: 'Century Gothic', sans-serif;
            margin-right: 5px;
            margin-left: 220px;
            height: 100%;
            border-color: rgba(0, 0, 0, .1);
            width: 400px;
        }

        .parent .inp button {
            font-size: 18px;
            padding: 8px;
            background: #ffb400;
            border: solid 2px #ffb400;
            color: #fff;
            font-weight: 500;
            transition: all .3s ease
        }

        .parent .inp button:hover {
            background: #020c3c;
            border: solid 2px #020c3c;
            cursor: pointer
        }

        .parent ul {
            display: flex;
            list-style: none;
            justify-content: center;
            margin-top: 40px;

        }

        .parent ul li {
            width: 150px;
            height: 150px;
           margin-left: 10px;
            text-align: center;
            font-size: 20px;
            color: #5b5353;
        }

        .parent ul li span {
       
            border-radius: 5px;
            background: #ef8c11;
            text-align: center;
            display: block;
            color: #fff;
            font-size: 30px;
            width: 150px;
            height: 80px;
            display: flex;;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
</style>
</head>
<body>
  <div class="parent">
        <h1>modern age calculator</h1>
        <div class="inp">
            <input type="date" id="input" placeholder="day/month/year">
            <button id="button" onclick="calc()">result calc</button>
        </div>
        <ul>
            <li><span></span>years</li>
            <li><span></span>months</li>
            <li><span></span>days</li>
            <li><span></span>hours</li>
            <li><span></span>minutes</li>
            <li><span></span>seconds</li>
        </ul>
    </div>
      <script>
var datbtn = document.getElementById("button"),
datdiv = document.getElementById("div"),
thedate = new Date(),
month = thedate.getMonth(),
day = thedate.getDate(),
year = thedate.getFullYear(),
span = document.querySelectorAll("span");


function calc() {
  var date = new Date(),
  hours = date.getHours(),
  minute = date.getMinutes(),
  second = date.getSeconds();
  var dat = window.input.value,
  arr = dat.split("-"),
  arr0 = eval(arr[2]),
  arr1 = eval(arr[1]),
  arr2 = eval(arr[0]),
  userday = 30 + day - arr0,
  usermonth = 12 + month - arr1,
  useryear = year - 1 - arr2;
  if (arr[1] == null) {

    span.textContent.display = "none";
  }
  if (userday >= 30) {
    userday = 0 + userday % 30;
    usermonth = usermonth + 1;

  } else {
    userday = userday;
    usermonth = usermonth;
  }
  if (usermonth >= 12) {
    usermonth = usermonth % 12;
    useryear = useryear + 1;

  } else {
    usermonth = usermonth;
    useryear = useryear;
  }
  if (hours < 10) {
    hours = "0" + hours;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  if (userday < 10) {
    userday = "0" + userday;
  }
  if (usermonth < 10) {
    usermonth = "0" + usermonth;
  }
  if (useryear < 10) {
    useryear = "0" + useryear;
  }
  span[0].textContent = useryear;
  span[1].textContent = usermonth;
  span[2].textContent = userday;
  span[3].textContent = hours;
  span[4].textContent = minute;
  span[5].textContent = second;


  setInterval(calc, 1000);
};
    </script>
</body>
</html>

8. Responsive Age Calculator

Made by Ezeani Ikechukwu Anthony. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Raleway;
}

@font-face {
  src: url(Raleway-Regular.ttf);
  font-family: Raleway;
}
body {
  background: #efefef;
  color: #333;
}

.showcase {
  background: #fff;
  margin: 50px auto 0;
  width: 90%;
  max-width: 1100px;
  text-align: center;
  padding: 50px;
}

.showcase h1 {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 30px;
}

.showcase .input-field {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 50px 30px;
}

.showcase .input-field input {
  height: 50px;
  border: 1px solid #ccc;
  background: transparent;
  padding-left: 10px;
  font-weight: 600;
  outline: none;
}

.showcase .input-field button {
  height: 50px;
  outline: none;
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.showcase .input-field button.calculate {
  background: dodgerblue;
}

.showcase .input-field button.reset {
  background: crimson;
}

.showcase .input-field button:hover {
  transform: scale(0.98);
}

.showcase .result h3 {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1px;
}

.showcase .result.error {
  color: red;
}

.showcase .result.success {
  color: limegreen;
}

/*==================================================================================================
                                        MEDIA QUERIES
=================================================================================================*/
@media (max-width: 768px) {
  .showcase .input-field {
    grid-template-columns: 1fr;
    margin: 0 20px 30px;
  }

  .showcase {
    padding: 20px;
  }

  .showcase h1 {
    font-size: 35px;
  }

  .showcase .result h3 {
    font-size: 17px;
  }
}
</style>
</head>
  <body>
    <section id="showcase" class="showcase">
      <h1>Age Calculator</h1>
      <div class="input-field">
        <input type="text" placeholder="Enter your birth year" id="input" />
        <button class="btn calculate">Calculate</button>
        <button class="btn reset">Reset</button>
      </div>
      <div class="result"></div>
    </section>
      <script>
const input = document.querySelector("#input");
const calculateBtn = document.querySelector(".calculate");
const resetBtn = document.querySelector(".reset");
const resultDiv = document.querySelector(".result");

calculateBtn.addEventListener("click", () => {
  clearDiv();
  let validate = validateInput();
  let h3 = document.createElement("h3");
  h3.innerText = validate;
  resultDiv.appendChild(h3);
});

function validateInput() {
  let currentYear = new Date().getFullYear();
  let result = currentYear - input.value;
  let finalResult = Number(result);
  if (input.value === "") {
    resultDiv.classList.add("error");
    return "Input field mustn't be empty!";
  } else if (isNaN(finalResult) || input.value < 1890) {
    resultDiv.classList.add("error");
    return `Input value not supported!`;
  } else {
    resultDiv.classList.add("success");
    return `You are ${finalResult} years old!`;
  }
}

function clearDiv() {
  resultDiv.innerText = "";
  resultDiv.classList.remove("error");
  resultDiv.classList.remove("success");
}

resetBtn.addEventListener("click", () => {
  input.value = "";
  clearDiv();
});
    </script>
</body>
</html>

9. JavaScript Age Calculator

Made by Shashi Kant Yadav. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #666600;
	font-size: 15px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
}
* {
	box-sizing: border-box;
}
.container{
	width: 70%;
	height: auto;
	margin: 100px auto;
	background-color: #eee;
	padding: 10px 10px 20px 10px;
	border-radius: 5px;
}
.base{
	width: 100%;
	padding: 0 10px;
	margin: 0;
	overflow: hidden;
	display: block;
	float: none;
}
.block{
	width: 30%;
	padding: 5px 10px;
	margin: 0 auto;
	display: inline-block;
	float: left;
}
.base h4{
	font-size: 26px;
	text-align: left;
	font-family: verdana;
	font-weight: normal;
	letter-spacing: 0.5px;
	word-spacing: 2.7px;
	color: navy;
}
.enter{
	width: 100%;
	padding: 10px;
	margin: 0;
	display: block;
	float: none;
}
.title{
	font-size: 24px;
	text-align: left;
	font-family: verdana;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0.5px;
	word-spacing: 2.7px;
	color: purple;
}
input[type=text] {
	width: 150px;
	margin: auto;
	outline: none;
	border: 2px solid purple;
	padding: 12px;
	background-color: #f7f7f7;
    border-radius: 2px;
    color: purple;
    font-size: 17px;
}
input[type=text]:focus{
	background-color: #ffffff;
	border: 2px solid orange;
	outline: none;
}
input[type=button]{
	width: 150px;
	margin: auto;
	outline: none;
	border: none;
	border-radius: 2px;
	background-color: green;
	color: #ffffff;
	padding: 14px 16px;
	text-align: center;
	font-size: 16px;
}
input[type=button]:hover{
	background-color: #006600;
}
input[type=button]:active{
	background-color: #006633;
}
#age{
	display: block;
	margin: 10px;
	padding: 10px;
	overflow: hidden;
	font-family: verdana;
	font-size: 26px;
	font-weight: normal;
	line-height: 1.5;
	word-spacing: 2.7px;
	color: navy;
}
</style>
</head>
<body>
<div class="container">	
  <form>
  	<div class="base">
  		<div class="enter">
  		<h4>Enter Your Date Of Birth</h4>
  	</div>
  <div class="block">
  	<p class="title">Date</p>
  	<input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
  	<p class="title">Month</p>
    <input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
  	<p class="title">Year</p>
    <input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />
  </div>
  </div> 
  <div class="base">
  	<div class="enter">
    <input type="button" name="submit" value="Submit" onclick="age()" />
    </div>
  </div>
    <div id="age"></div>
  </form>
</div>
      <script>
function age() {
  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  if (d1 > d2) {
    d2 = d2 + month[m2 - 1];
    m2 = m2 - 1;
  }
  if (m1 > m2) {
    m2 = m2 + 12;
    y2 = y2 - 1;
  }
  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

  document.getElementById('age').innerHTML = 'Your Age is ' + y + ' Years ' + m + ' Months ' + d + ' Days';
}
    </script>
</body>
</html>

10. Smart Age Calculator

Made by Powit. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');

body {
  font-family: "Source Sans Pro";
}

h1 {
  font-size: 64px;
  text-align: center;
  margin-top: 155px;
}

#age {
  background-color: black;
  border-radius: 5px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
  <h1>I'm <span data-birthday="13/02/2003" id="age"></span> years old.</h1>
      <script>
// Calculate age if necessary
if (document.querySelector("[data-birthday]")) calculateAge();

// Calculate age from birthday date
function calculateAge() {
  var ageField = document.querySelector("[data-birthday]");
  var birthday = ageField.getAttribute("data-birthday");

  var birthdayArray = birthday.split("/");

  var birthDay = Number(birthdayArray[0]);
  var birthMonth = Number(birthdayArray[1]);
  var birthYear = Number(birthdayArray[2]);

  var age = getAge(birthYear, birthMonth, birthDay);

  ageField.innerHTML = age;

  function getAge(birthYear, birthMonth, birthDay) {
    var today = new Date();

    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth() + 1;
    var todayDay = today.getDate();

    let age = todayYear - birthYear;

    if (todayMonth > birthMonth) {
      return age;
    } else if (todayDay > birthDay && todayMonth === birthMonth) {
      return age;
    } else if (todayDay < birthDay && todayMonth === birthMonth) {
      age = age - 1;
      return age;
    } else if (todayDay === birthDay && todayMonth === birthMonth) {
      return age;
    } else if (todayMonth < birthMonth) {
      age = age - 1;
      return age;
    }
  }
}
    </script>
</body>
</html>
 

11. Simple Age Calculator

Made by TheAndersMan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300" rel="stylesheet">
<style>
body {
  margin: 0;
  overflow: hidden;
}

* {
  font-family: raleway;
}

h1 {
  font-weight: 100;
}

.jar h1 {
  font-size: 3em;
  text-align: center;
}
.jar input {
  height: 60px;
  width: 700px;
  outline: none;
  font-size: 3em;
  font-family: raleway;
  margin: 0 auto;
  display: block;
}
.jar button {
  font-size: 3em;
  background: #3f51b5;
  border: none;
  border-radius: 3px;
  display: block;
  margin: 50px auto;
  color: white;
}

.wrap {
  visibility: hidden;
  height: 100vh;
  width: 100vw;
}
.wrap div {
  height: calc(100vh / 6);
  margin: 0;
}
.wrap div h1 {
  margin: 0;
  text-align: center;
}
.wrap div p {
  text-align: center;
}

@media (max-height: 750px) {
  .wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .wrap div {
    width: 50vw;
    height: calc(100vh / 3);
  }
  .wrap div h1 {
    margin: 0;
    line-height: calc(100vh / 6);
  }
  .wrap div p {
    margin: 0;
    line-height: calc(100vh / 6);
  }
}
</style>
</head>
<body>
  <div class="jar">
  <h1>Please Enter Your Birthdate and Time</h1>
  <input type="datetime-local" class="start" />
  <button class="done">Done</button>
</div>

<div class="wrap">
  <div>
    <h1>Age in months</h1>
    <p class="mon"></p>
  </div>
  <div>
    <h1>Age in weeks</h1>
    <p class="week"></p>
  </div>
  <div>
    <h1>Age in days</h1>
    <p class="day"></p>
  </div>
  <div>
    <h1>Age in hours</h1>
    <p class="hour"></p>
  </div>
  <div>
    <h1>Age in minutes</h1>
    <p class="min"></p>
  </div>
  <div>
    <h1>Age in seconds
    </h1>
    <p class="sec"></p>
  </div>
</div>
      <script>
document.querySelector(".done").addEventListener("click", function () {
  document.querySelector(".wrap").style.visibility = "visible";
  document.querySelector(".jar").style.display = "none";
  const update = function () {
    let bday = document.querySelector(".start").value,
    bdays = new Date(bday),
    done = bdays.getTime(),
    d = new Date(),
    mili = d.getTime(),
    tim = mili - done,
    mon = Math.floor(tim / 2592000000),
    week = Math.floor(tim / 604800000),
    day = Math.floor(tim / 86400000),
    hour = Math.floor(tim / 3600000),
    min = Math.floor(tim / 60000),
    sec = Math.floor(tim / 1000);
    let fill = function (time1, time2) {
      document.querySelector(time1).innerHTML = time2;
    };
    fill(".mon", mon);
    fill(".week", week);
    fill(".day", day);
    fill(".hour", hour);
    fill(".min", min);
    fill(".sec", sec);
  };
  let run = setInterval(update, 1000);
});
    </script>
</body>
</html>