JavaScript出生日期选择后年龄自动计算功能无响应问题排查求助

我编写了以下JavaScript和HTML代码，想要实现选择出生日期后自动计算年龄并填充到只读的年龄输入框中，但实际操作时年龄输入框完全没有响应，恳请帮忙排查问题：

<script type="text/javascript"> $(document).ready(function() { $('#dob').change(function() { var dob = new Date(document.getElementById('dob').value); var today = new Date(); var age = Math.floor((today-dob)/(365.25*24*60*60*1000)); document.getElementById('age').value = age; }); }); </script>
<div class="input-field col s12">
  <label for="dob_label">Date of Birth</label></br>
  <input type="date" name="dob" id="dob" required/>
</div>
<div class="input-field col s12">
  <label for="age_label">age</label></br>
  <input type="text" name="age" id="age" readonly/>
</div>

排查出的核心问题及解决方案 #

1. 最可能的诱因：未引入jQuery库 #

你的代码使用了$(document).ready()和$('#dob')等jQuery语法，但如果页面中没有提前引入jQuery库，这段JS代码会直接报错，完全无法执行。这是这类问题最常见的原因。

2. 日期解析的兼容性隐患 #

部分浏览器中，input[type="date"]的value可能返回非标准格式，或者当用户未选择日期时value为空，此时new Date(空字符串)会返回一个无效的Invalid Date，导致后续计算直接失效。

3. 年龄计算逻辑的准确性缺陷 #

原代码用毫秒数直接除以365.25天的毫秒数，没有考虑当年生日是否已过的情况，会导致年龄计算不准确（比如今天是2024年2月1日，用户生日是2000年3月1日，实际年龄是23，但原计算会得到24）。

修正后的完整可运行代码 #

首先确保在页面头部引入jQuery（可以用CDN版本，也可以本地引入），然后优化JS逻辑：

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  // 同时监听change和input事件，兼容更多操作场景
  $('#dob').on('change input', function() {
    const dobValue = $(this).val();
    // 先判断日期是否有效
    if (!dobValue) {
      $('#age').val('');
      return;
    }

    const dob = new Date(dobValue);
    const today = new Date();
    
    // 准确计算年龄：考虑当年生日是否已过
    let age = today.getFullYear() - dob.getFullYear();
    const monthDiff = today.getMonth() - dob.getMonth();
    // 如果当前月份小于生日月份，或者月份相同但日期还没到生日，年龄减1
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
      age--;
    }

    // 确保年龄不为负数（防止用户选择未来日期）
    $('#age').val(age >= 0 ? age : '');
  });
});
</script>

<div class="input-field col s12">
  <label for="dob_label">Date of Birth</label><br>
  <input type="date" name="dob" id="dob" required/>
</div>
<div class="input-field col s12">
  <label for="age_label">Age</label><br>
  <input type="text" name="age" id="age" readonly/>
</div>

额外优化点说明 #

• 统一使用jQuery的选择器和方法，避免原生JS和jQuery混合使用，代码更简洁一致；
• 同时监听change和input事件，覆盖用户手动输入日期（部分浏览器支持）或通过选择器修改日期的场景；
• 增加了无效日期（空值、未来日期）的处理，避免出现NaN或负数年龄；
• 修复了年龄计算的逻辑漏洞，确保结果准确。

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