PHP表单结合JavaScript计算日期年份差显示NaN问题求助

我来帮你搞定这个问题，你当前代码出现NaN是因为存在好几处关键错误，咱们逐一修正：

首先修正HTML代码里的属性错误 #

你的input标签属性写法有误：

• type:"text" 应该改成 type="text"（用等号而非冒号）
• disabled="disable" 应该改成 disabled="disabled"（属性值为disabled，或者直接写disabled也可以）

修正后的HTML部分：

<form action="url.php" method="post">
  <!-- 其他表单元素 -->
  <input type="text" name="date" id="date" placeholder="YYYY/mm/dd" />
  <!-- 其他表单元素 -->
  <input type="text" name="dur" id="dur" disabled="disabled" />
</form>

然后修复JavaScript的核心问题 #

原JS代码有这些致命问题：

1. 重复定义了month变量，还漏定义了day变量
2. 直接用字符串相减（date - date_form），字符串无法直接做数值运算，必须转成Date对象后再计算年份差
3. 输入的日期格式是YYYY/mm/dd，需要正确解析成Date对象（注意Date对象的月份是从0开始的）

修正后的jQuery版JavaScript代码：

// 监听日期输入框的输入/变化事件，实时触发计算
$('#date').on('change input', function() {
  calc();
});

function calc() {
  // 获取当前日期的年份、月份、日期
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth(); // 0-11
  const currentDay = now.getDate();

  // 获取用户输入的日期字符串
  const inputDateStr = $('#date').val().trim();
  if (!inputDateStr) {
    $('#dur').val(''); // 输入为空时清空结果框
    return;
  }

  // 分割YYYY/mm/dd格式的日期
  const [inputYear, inputMonth, inputDay] = inputDateStr.split('/');
  // 创建输入日期的Date对象（注意月份要减1，因为Date的月份是0-11）
  const inputDate = new Date(inputYear, inputMonth - 1, inputDay);

  // 验证日期是否有效（比如2024/13/01就是无效日期）
  if (isNaN(inputDate.getTime())) {
    $('#dur').val('无效日期');
    return;
  }

  // 计算基础年份差
  let yearDiff = currentYear - inputDate.getFullYear();

  // 处理跨年的精确情况：如果当前日期还没到输入日期的当月当天，年份差要减1
  if (inputMonth - 1 > currentMonth || (inputMonth - 1 === currentMonth && inputDay > currentDay)) {
    yearDiff--;
  }

  // 把结果赋值到dur输入框
  $('#dur').val(yearDiff);
}

关键说明 #

1. 实时计算：用change input事件监听，用户输入或修改日期时都会自动触发计算
2. 日期有效性校验：避免无效日期导致的计算错误，会提示"无效日期"
3. 精确年份差：考虑了月份和日期的影响，比如当前是2024年2月，输入2023年3月，年份差会显示0而非1，更符合实际需求
4. 空输入处理：输入框为空时自动清空结果，避免残留错误值

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