当サイトはアフィリエイト広告を利用してます

誕生日から年齢を自動計算して表示するHTMLとJavaScript

HTMLに、生年月日を属性値として設定しておくと、年齢を自動計算して表示します。

年齢の入力フォーマット

以下のようなフォーマットで指定すると、年齢を自動計算します。

<span>タグに、class="ageculculation"を付ける
生年月日をyear, month, day属性として記述する
birth属性にyesterdayと記述すると、誕生日の前日に年齢が増える (未指定の場合は誕生日に年齢が増える)

↓ 2021年10月15日生まれ、誕生日に年を取る例

    <span class="ageculculation" data-year="2021" data-month="10" data-day="15" data-birth="today"></span>

↓ 2023年8月1日生まれ、誕生日の前日に年を取る例

    <span class="ageculculation" data-year="2023" data-month="8" data-day="1" data-birth="yesterday"></span>

一般には誕生日が来たら1才年を取る、と考えることが多いですね。いっぽう、法律上は、誕生日の前日に年齢が1加算されます。
このため、本スクリプトでは、どちらにも対応できるように、birth属性で指定できるようにしました。

同じページ上で複数表示する場合は、上記<span>タグを複数記述してください。また、生まれていない日付だった場合は、便宜上0と表示します。

ソースコードは下記です。オープンソース(MITライセンス)で公開しています。

    document.addEventListener("DOMContentLoaded", function () {
        const today = new Date();
        let ages = document.querySelectorAll("span.ageculculation");
        ages.forEach((spanage) => {
            let yesterday = 0;
            if (spanage.dataset.birth === "yesterday") {
                yesterday -= 1;
            }
            let birth = new Date(parseInt(spanage.dataset.year), parseInt(spanage.dataset.month) - 1, parseInt(spanage.dataset.day) + yesterday);
            let age = 0;
            if (today.getFullYear() - birth.getFullYear() > 0) {
                age = today.getFullYear() - birth.getFullYear() - 1;
                if (today.getMonth() > birth.getMonth()) {
                    age++;
                } else if (today.getMonth() == birth.getMonth() && (today.getDate() >= birth.getDate())) {
                    age++;
                }
            }
            spanage.textContent = parseInt(age);
        });
    });