求基于年、月、日输入的精确出生日期JavaScript实现方案

问题背景 #

我正在开发一款计算器，需要根据输入的年龄（年、月、日）计算出生日期。现有代码仅能计算近似值，未考虑各月实际天数及闰年，希望实现精确计算。

现有代码 #

JavaScript 部分 #

const arrDatas = [];
const elmDataNasc = document.querySelector('#dataNasc');

function setDataAnos (e) { // store at position 0 of arrDates the years
    arrDatas[0] = e;
    setDataNasc();
}

function setDataMeses (e) { // store in position 1 of arrDatas the months
    arrDatas[1] = e;
    setDataNasc();
}

function setDataDias (e) { // store in position 2 of arrDatas the days
    arrDatas[2] = e;
    setDataNasc();
}

function setDataNasc () {
    let anosDias = arrDatas[0] * 365; // convert years to days
    let mesesDias = arrDatas[1] * 30.417; // convert months to days (30,417 is the average of days per month)
    let diasDias = arrDatas[2]; // Days

    let totalDias = anosDias + mesesDias + diasDias; // add the total number of days and assign it to a variable

    let dataData = new Date(); // current date
    dataData.setDate( dataData.getDate() - totalDias); // subtract total days from the current date

    let data = dataData.toLocaleDateString("pt-BR", { year: "numeric", month: "2-digit", day: "2-digit",}); // format to DD/MM/YYYY
    elmDataNasc.value = data; // assign date to birthdate input
}

HTML 部分 #

<form>
    <p>Enter data to calculate date of birth:</p>

    <label for="years">Years</label>
    <input onchange="setDataAnos(this.value)" type="number" name="years" min="0" max="31">

    <label for="months">Months</label>
    <input onchange="setDataMeses(this.value)" type="number" name="months" min="0" max="11">

    <label for="days">Days</label>
    <input onchange="setDataDias(this.value)" type="number" name="days" min="0" max="31">
    <br>
    <br>
    <label for="dateBirth">Date of birth:</label>
    <input id="dataNasc" type="text" name="dataNasc" value="" disabled>
</form>

精确计算的解决方案 #

核心思路是直接利用JavaScript的Date对象处理日期运算，它会自动处理月份溢出、闰年天数等复杂规则，无需手动计算。

修改后的代码 #

JavaScript 部分

const elmDataNasc = document.querySelector('#dataNasc');
const yearsInput = document.querySelector('input[name="years"]');
const monthsInput = document.querySelector('input[name="months"]');
const daysInput = document.querySelector('input[name="days"]');

function calculateBirthDate() {
    // 转换输入值为数字，空值默认0
    const years = parseInt(yearsInput.value) || 0;
    const months = parseInt(monthsInput.value) || 0;
    const days = parseInt(daysInput.value) || 0;

    const today = new Date();
    // 反向计算出生日期：从今天减去对应的年、月、日
    const birthDate = new Date(
        today.getFullYear() - years,
        today.getMonth() - months,
        today.getDate() - days
    );

    // 格式化为巴西地区的DD/MM/YYYY格式
    const formattedDate = birthDate.toLocaleDateString("pt-BR", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
    });

    elmDataNasc.value = formattedDate;
}

// 给所有输入框绑定计算事件
yearsInput.addEventListener('change', calculateBirthDate);
monthsInput.addEventListener('change', calculateBirthDate);
daysInput.addEventListener('change', calculateBirthDate);

HTML 部分（移除内联事件）

<form>
    <p>Enter data to calculate date of birth:</p>

    <label for="years">Years</label>
    <input type="number" name="years" id="years" min="0" max="120">

    <label for="months">Months</label>
    <input type="number" name="months" id="months" min="0" max="11">

    <label for="days">Days</label>
    <input type="number" name="days" id="days" min="0" max="31">
    <br>
    <br>
    <label for="dateBirth">Date of birth:</label>
    <input id="dataNasc" type="text" name="dataNasc" value="" disabled>
</form>

关键说明 #

• 自动处理日期规则：Date对象会自动处理诸如“1月减1个月变为去年12月”“闰年2月的29天”等场景，无需手动编写闰年判断或月份天数表。
• 输入容错：通过parseInt和默认值0处理空输入，避免计算报错。
• 事件绑定优化：移除内联事件，改用addEventListener实现更清晰的代码结构。
• 格式保持：依旧使用toLocaleDateString生成符合需求的日期格式。

内容的提问来源于stack exchange，提问作者João Paulo Saragossa