如何用jQuery计算截至2024年5月的年龄（修复天数计算问题）

需求：计算截至2024年5月1日的个人年龄（日、月、年），用户通过日期选择器选择出生日期后，将年龄的年、月、日分别展示在对应文本框内。目前年、月计算功能正常，但天数计算存在异常，现有代码如下：

<script type="text/javascript">
$(function () {
    $("#XIStudentDOB").datepicker({
        onSelect: function (value, ui) {
            var toDate = new Date(2024, 05, 01);
            var fromDate = new Date(value);
            var days = (toDate - fromDate) / 1000 / 60 / 60 / 24;
            var y = 365;
            var y2 = 31;
            var remainder = days % y;
            var casio = remainder % y2;
            year = (days - remainder) / y;
            month = (remainder - casio) / y2;
            day = (toDate - fromDate)  / y;
            var displayMonth = fromDate.getMonth()+1;
            var DateString = fromDate.getDate() + "/" + displayMonth + '/' + fromDate.getFullYear();
            $("#XIStudentDOB").val(DateString);
            $("#age").val(year);
            $("#months").val(month);
            $("#days").val(day);
        },
        dateFormat: 'yy,mm,dd',
        defaultDate: '2000,01,01',
        maxDate: new Date((new Date).getFullYear(), 11, 31),
        yearRange: '2000:2016',
        changeMonth: true,
        changeYear: true
    }); 
});
</script>

<input type="text" name="XIStudentDOB" id="XIStudentDOB" class="form-control" />
<input type="text" name="yr" id="yr" maxlength="2" required=""  />Year
<input type="text" name="month" id="month" maxlength="2"  required=""  />Months
<input type="text" name="days" id="days"  maxlength="2"  required=""  />Days

问题分析 #

1. 原代码中天数计算逻辑day = (toDate - fromDate) / y;完全错误，这是把总天数除以365，得到的是年数相关数值，根本不是剩余天数。
2. 用固定365天/年、31天/月的粗暴计算方式，没考虑闰年、不同月份天数差异，实际年、月计算也存在隐性误差。

修正后的代码逻辑 #

正确的年龄计算需要按年→月→日的顺序逐阶推导，处理借位情况：

<script type="text/javascript">
$(function () {
    $("#XIStudentDOB").datepicker({
        onSelect: function (value, ui) {
            // 注意：JS的Date月份是0索引，2024年5月1日对应4
            const toDate = new Date(2024, 4, 1);
            const fromDate = new Date(value);

            let years = toDate.getFullYear() - fromDate.getFullYear();
            let months = toDate.getMonth() - fromDate.getMonth();
            let days = toDate.getDate() - fromDate.getDate();

            // 天数为负，向前借一个月
            if (days < 0) {
                months--;
                // 获取借位月份的总天数
                const prevMonth = new Date(toDate.getFullYear(), toDate.getMonth(), 0);
                days += prevMonth.getDate();
            }

            // 月份为负，向前借一年
            if (months < 0) {
                years--;
                months += 12;
            }

            // 格式化出生日期显示
            const displayMonth = fromDate.getMonth() + 1;
            const dateString = `${fromDate.getDate()}/${displayMonth}/${fromDate.getFullYear()}`;
            $("#XIStudentDOB").val(dateString);

            // 填充到对应输入框（原代码写错了年龄框ID，应为#yr）
            $("#yr").val(years);
            $("#month").val(months);
            $("#days").val(days);
        },
        dateFormat: 'yy,mm,dd',
        defaultDate: '2000,01,01',
        maxDate: new Date((new Date).getFullYear(), 11, 31),
        yearRange: '2000:2016',
        changeMonth: true,
        changeYear: true
    }); 
});
</script>

<input type="text" name="XIStudentDOB" id="XIStudentDOB" class="form-control" />
<input type="text" name="yr" id="yr" maxlength="2" required=""  />Year
<input type="text" name="month" id="month" maxlength="2"  required=""  />Months
<input type="text" name="days" id="days"  maxlength="2"  required=""  />Days

关键修正点 #

• 修正目标日期的月份索引：原代码写05对应6月，实际2024年5月1日应写new Date(2024, 4, 1)。
• 采用借位逻辑计算天数：解决了跨月、闰年的天数计算问题，结果更准确。
• 修正输入框ID对应：原代码错误将年龄写入不存在的#age，实际应为#yr。

内容的提问来源于stack exchange，提问作者user22761517