We’ve all had that moment. Someone asks, “How old are you exactly?” and you have to pause and do the mental math. Or you’re filling out a form that asks for your age in years, months, and days. Or maybe you’re just curious about how many days you’ve been alive.
That’s where this Age Calculator comes in.
It’s simple. It’s accurate. And it gives you your exact age down to the day.
📅 Age Calculator
Find exact age in years, months, and days
Also shows total days · weeks · months
📋
Enter your birth date
and click “Calculate Age”
and click “Calculate Age”
Quick age:
Age Calculator Complete HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Calculator – Date Difference Tool</title>
<style>
/* ===== RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}
body {
background: linear-gradient(145deg, #f0f4f8 0%, #d9e2ec 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0;
}
/* ===== MAIN CARD ===== */
.calculator {
background: #ffffff;
border-radius: 40px;
padding: 40px 35px 45px;
max-width: 520px;
width: 100%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transition: transform 0.25s ease;
}
.calculator:hover {
transform: translateY(-3px);
}
/* ===== HEADER ===== */
.header {
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #eef2f7;
padding-bottom: 20px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
color: #1a2634;
letter-spacing: -0.3px;
}
.header h1 span {
color: #2a7de1;
}
.header p {
color: #5b6f82;
font-size: 15px;
margin-top: 6px;
font-weight: 400;
}
.header .badge {
display: inline-block;
background: #eef2f7;
color: #2d3e53;
font-size: 13px;
font-weight: 600;
padding: 4px 16px;
border-radius: 30px;
margin-top: 10px;
letter-spacing: 0.3px;
}
/* ===== DATE INPUT SECTION ===== */
.date-inputs {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.date-group {
display: flex;
align-items: center;
gap: 12px;
background: #f4f7fc;
padding: 12px 18px;
border-radius: 16px;
border: 1px solid #e2e9f2;
flex-wrap: wrap;
}
.date-group label {
font-weight: 600;
color: #2d3e53;
font-size: 15px;
min-width: 45px;
}
.date-group input[type="date"] {
flex: 1;
padding: 10px 14px;
border: 1px solid #c9d6e8;
border-radius: 12px;
font-size: 15px;
background: white;
color: #1a2634;
outline: none;
transition: border-color 0.2s;
min-width: 150px;
}
.date-group input[type="date"]:focus {
border-color: #2a7de1;
box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.15);
}
.date-group input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.6;
cursor: pointer;
}
/* ===== ACTION BUTTONS ===== */
.action-row {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.btn {
border: none;
border-radius: 16px;
padding: 14px 0;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
flex: 1;
letter-spacing: 0.3px;
}
.btn:hover {
transform: scale(0.97);
}
.btn:active {
transform: scale(0.93);
}
.btn-calculate {
background: #2a7de1;
color: white;
box-shadow: 0 6px 14px -6px rgba(42, 125, 225, 0.35);
}
.btn-calculate:hover {
background: #1f6ad1;
box-shadow: 0 8px 18px -6px rgba(42, 125, 225, 0.45);
}
.btn-calculate:active {
background: #1558b5;
}
.btn-reset {
background: #f0f2f5;
color: #3d4f62;
}
.btn-reset:hover {
background: #e6e9ef;
}
.btn-today {
background: #e8f0fe;
color: #1f6ad1;
font-weight: 600;
}
.btn-today:hover {
background: #dce6f9;
}
/* ===== RESULT DISPLAY ===== */
.result-section {
background: #f4f7fc;
border-radius: 24px;
padding: 24px;
border: 1px solid #e2e9f2;
margin-bottom: 20px;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}
.result-section .empty-state {
color: #8a9db0;
text-align: center;
font-size: 15px;
}
.result-section .empty-state span {
font-size: 32px;
display: block;
margin-bottom: 8px;
}
.result-main {
text-align: center;
}
.result-main .age-value {
font-size: 42px;
font-weight: 700;
color: #0b1a2a;
line-height: 1.2;
}
.result-main .age-label {
font-size: 16px;
color: #5b6f82;
font-weight: 500;
}
.result-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e9f2;
}
.result-detail-item {
text-align: center;
background: white;
padding: 10px 8px;
border-radius: 12px;
border: 1px solid #eef2f7;
}
.result-detail-item .number {
font-size: 22px;
font-weight: 700;
color: #1a2634;
display: block;
}
.result-detail-item .label {
font-size: 12px;
color: #8a9db0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== QUICK PRESETS ===== */
.quick-presets {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
padding-top: 18px;
border-top: 1px solid #eef2f7;
}
.preset-btn {
background: #f4f7fc;
border: 1px solid #e2e9f2;
border-radius: 30px;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
color: #2d3e53;
cursor: pointer;
transition: all 0.15s;
}
.preset-btn:hover {
background: #e8edf6;
border-color: #c9d6e8;
transform: scale(1.02);
}
.preset-btn:active {
transform: scale(0.95);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
.calculator {
padding: 25px 18px 30px;
}
.header h1 {
font-size: 22px;
}
.date-group {
padding: 10px 14px;
flex-direction: column;
align-items: stretch;
}
.date-group label {
min-width: auto;
font-size: 14px;
}
.date-group input[type="date"] {
padding: 8px 12px;
font-size: 14px;
min-width: auto;
}
.action-row {
flex-direction: column;
}
.btn {
padding: 12px 0;
font-size: 15px;
}
.result-main .age-value {
font-size: 32px;
}
.result-details {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.result-detail-item .number {
font-size: 18px;
}
.result-detail-item .label {
font-size: 10px;
}
.quick-presets {
gap: 6px;
}
.preset-btn {
font-size: 12px;
padding: 4px 12px;
}
}
/* ===== ANIMATION ===== */
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.result-section .result-main,
.result-section .result-details {
animation: fadeSlideUp 0.3s ease forwards;
}
</style>
</head>
<body>
<div class="calculator">
<!-- ===== HEADER ===== -->
<div class="header">
<h1>📅 <span>Age</span> Calculator</h1>
<p>Find exact age in years, months, and days</p>
<div class="badge">Also shows total days · weeks · months</div>
</div>
<!-- ===== DATE INPUTS ===== -->
<div class="date-inputs">
<div class="date-group">
<label>🎂 Born</label>
<input type="date" id="birthDate">
</div>
<div class="date-group">
<label>📅 Today</label>
<input type="date" id="currentDate">
<button class="btn btn-today" id="todayBtn" style="flex: 0 1 auto; padding: 8px 18px; font-size: 13px; border-radius: 30px;">Today</button>
</div>
</div>
<!-- ===== ACTION BUTTONS ===== -->
<div class="action-row">
<button class="btn btn-calculate" id="calculateBtn">🎯 Calculate Age</button>
<button class="btn btn-reset" id="resetBtn">↻ Reset</button>
</div>
<!-- ===== RESULT DISPLAY ===== -->
<div class="result-section" id="resultSection">
<div class="empty-state" id="emptyState">
<span>📋</span>
Enter your birth date<br>and click "Calculate Age"
</div>
<div id="resultContent" style="display: none;">
<div class="result-main">
<div class="age-value" id="ageYears">—</div>
<div class="age-label">Years Old</div>
</div>
<div class="result-details">
<div class="result-detail-item">
<span class="number" id="ageMonths">—</span>
<span class="label">Months</span>
</div>
<div class="result-detail-item">
<span class="number" id="ageDays">—</span>
<span class="label">Days</span>
</div>
<div class="result-detail-item">
<span class="number" id="ageWeeks">—</span>
<span class="label">Weeks</span>
</div>
</div>
<div class="result-details" style="margin-top: 8px; padding-top: 10px; border-top: 1px solid #e2e9f2;">
<div class="result-detail-item">
<span class="number" id="totalDays">—</span>
<span class="label">Total Days</span>
</div>
<div class="result-detail-item">
<span class="number" id="totalWeeks">—</span>
<span class="label">Total Weeks</span>
</div>
<div class="result-detail-item">
<span class="number" id="totalMonths">—</span>
<span class="label">Total Months</span>
</div>
</div>
</div>
</div>
<!-- ===== QUICK PRESETS ===== -->
<div class="quick-presets">
<span style="font-size: 13px; color: #8a9db0; font-weight: 500;">Quick age:</span>
<button class="preset-btn" data-years="1">1 year</button>
<button class="preset-btn" data-years="5">5 years</button>
<button class="preset-btn" data-years="10">10 years</button>
<button class="preset-btn" data-years="18">18 years</button>
<button class="preset-btn" data-years="25">25 years</button>
<button class="preset-btn" data-years="30">30 years</button>
<button class="preset-btn" data-years="50">50 years</button>
<button class="preset-btn" data-years="65">65 years</button>
<button class="preset-btn" data-years="80">80 years</button>
</div>
</div>
<script>
// ============================================================
// AGE CALCULATOR LOGIC
// ============================================================
// DOM elements
const birthDateInput = document.getElementById('birthDate');
const currentDateInput = document.getElementById('currentDate');
const todayBtn = document.getElementById('todayBtn');
const calculateBtn = document.getElementById('calculateBtn');
const resetBtn = document.getElementById('resetBtn');
const emptyState = document.getElementById('emptyState');
const resultContent = document.getElementById('resultContent');
// Result display elements
const ageYears = document.getElementById('ageYears');
const ageMonths = document.getElementById('ageMonths');
const ageDays = document.getElementById('ageDays');
const ageWeeks = document.getElementById('ageWeeks');
const totalDays = document.getElementById('totalDays');
const totalWeeks = document.getElementById('totalWeeks');
const totalMonths = document.getElementById('totalMonths');
// ========== Helper Functions ==========
function setTodayDate() {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const dateString = `${year}-${month}-${day}`;
currentDateInput.value = dateString;
return dateString;
}
function getDefaultBirthDate() {
// Default to 18 years ago as a reasonable example
const today = new Date();
const birthYear = today.getFullYear() - 18;
const birthMonth = String(today.getMonth() + 1).padStart(2, '0');
const birthDay = String(today.getDate()).padStart(2, '0');
return `${birthYear}-${birthMonth}-${birthDay}`;
}
function parseDate(dateString) {
const parts = dateString.split('-');
return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
}
function isValidDate(dateString) {
if (!dateString) return false;
const date = parseDate(dateString);
return !isNaN(date.getTime());
}
function calculateAge(birthDate, currentDate) {
const birth = parseDate(birthDate);
const current = parseDate(currentDate);
if (isNaN(birth.getTime()) || isNaN(current.getTime())) {
return null;
}
if (birth > current) {
return { error: 'Birth date cannot be in the future' };
}
// Calculate years, months, days
let years = current.getFullYear() - birth.getFullYear();
let months = current.getMonth() - birth.getMonth();
let days = current.getDate() - birth.getDate();
// Adjust for negative months
if (months < 0) {
years--;
months += 12;
}
// Adjust for negative days
if (days < 0) {
months--;
// Get days in the previous month
const prevMonth = new Date(current.getFullYear(), current.getMonth(), 0);
days += prevMonth.getDate();
if (months < 0) {
months += 12;
years--;
}
}
// Total days between dates
const timeDiff = current.getTime() - birth.getTime();
const totalDaysNum = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const totalWeeksNum = Math.floor(totalDaysNum / 7);
const totalMonthsNum = Math.floor(totalDaysNum / 30.44); // Average month length
// Age in weeks (from years, months, days approximation)
const weeks = Math.floor(days / 7);
const remainingDays = days % 7;
return {
years: years,
months: months,
days: days,
weeks: weeks,
remainingDays: remainingDays,
totalDays: totalDaysNum,
totalWeeks: totalWeeksNum,
totalMonths: totalMonthsNum,
isBirthday: years > 0 && months === 0 && days === 0
};
}
function displayResult(result) {
if (!result) {
emptyState.style.display = 'block';
resultContent.style.display = 'none';
return;
}
if (result.error) {
emptyState.style.display = 'block';
emptyState.innerHTML = `<span>⚠️</span> ${result.error}`;
resultContent.style.display = 'none';
return;
}
emptyState.style.display = 'none';
resultContent.style.display = 'block';
ageYears.textContent = result.years;
ageMonths.textContent = result.months;
ageDays.textContent = result.days;
// Weeks = total weeks from total days (more accurate)
ageWeeks.textContent = result.weeks;
totalDays.textContent = result.totalDays.toLocaleString();
totalWeeks.textContent = result.totalWeeks.toLocaleString();
totalMonths.textContent = result.totalMonths.toLocaleString();
}
function calculateAndDisplay() {
const birthDate = birthDateInput.value;
const currentDate = currentDateInput.value;
if (!birthDate || !currentDate) {
emptyState.style.display = 'block';
emptyState.innerHTML = '<span>⚠️</span> Please enter both dates';
resultContent.style.display = 'none';
return;
}
if (!isValidDate(birthDate) || !isValidDate(currentDate)) {
emptyState.style.display = 'block';
emptyState.innerHTML = '<span>⚠️</span> Please enter valid dates';
resultContent.style.display = 'none';
return;
}
const result = calculateAge(birthDate, currentDate);
displayResult(result);
}
function resetAll() {
birthDateInput.value = getDefaultBirthDate();
currentDateInput.value = setTodayDate();
emptyState.style.display = 'block';
emptyState.innerHTML = '<span>📋</span> Enter your birth date<br>and click "Calculate Age"';
resultContent.style.display = 'none';
}
// ========== Event Listeners ==========
// Today button
todayBtn.addEventListener('click', setTodayDate);
// Calculate button
calculateBtn.addEventListener('click', calculateAndDisplay);
// Reset button
resetBtn.addEventListener('click', resetAll);
// Quick preset buttons
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => {
const years = parseInt(btn.dataset.years);
const today = new Date();
const birthYear = today.getFullYear() - years;
const birthMonth = String(today.getMonth() + 1).padStart(2, '0');
const birthDay = String(today.getDate()).padStart(2, '0');
birthDateInput.value = `${birthYear}-${birthMonth}-${birthDay}`;
currentDateInput.value = setTodayDate();
calculateAndDisplay();
});
});
// Enter key support
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
if (document.activeElement === birthDateInput || document.activeElement === currentDateInput) {
e.preventDefault();
calculateAndDisplay();
}
}
});
// ========== Initialize ==========
// Set default dates on load
birthDateInput.value = getDefaultBirthDate();
currentDateInput.value = setTodayDate();
// Auto-calculate on load
setTimeout(calculateAndDisplay, 100);
</script>
</body>
</html>