JS计算日期选择器与当前日期间差值并实现未满18岁错误提示

一、HTML代码修正 #

你的原有生日输入框缺少id属性，已有的Fname、Lname输入框也需要补充id方便JS取值，调整后的参考代码如下：

<!-- 你已开发的Fname输入框补充id即可 -->
<label for="fname">名：</label><br><br>
<input class="form-control" type="text" id="fname" name="fname" required><br><br>

<!-- 你已开发的Lname输入框补充id即可 -->
<label for="lname">姓：</label><br><br>
<input class="form-control" type="text" id="lname" name="lname" required><br><br>

<!-- 调整后的生日输入框，新增id，优化语义 -->
<label for="birthday">生日：</label><br><br>
<input class="form-control" type="date" id="birthday" name="birthday" value="" class="datepicker" required
    placeholder="birthday" oninvalid="this.setCustomValidity('生日格式无效')">

<!-- 新增触发计算的按钮 -->
<button type="button" onclick="calculateDays()">提交计算</button>

<!-- 新增结果展示容器，避免用document.write覆盖页面 -->
<div id="result"></div>

二、JavaScript完整实现 #

// 1. 实现要求的dateDiff函数，接收出生日期参数，返回和当前日期的间隔天数
function dateDiff(birthDate) {
  const currentDate = new Date();
  // 计算毫秒差，转换为天数后向下取整，避免时区问题导致计算偏差
  const diffMs = currentDate.getTime() - birthDate.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  return diffDays;
}

// 2. 触发计算的逻辑函数
function calculateDays() {
  // 读取表单输入值
  const fname = document.getElementById('fname').value.trim();
  const lname = document.getElementById('lname').value.trim();
  const birthValue = document.getElementById('birthday').value;
  const resultContainer = document.getElementById('result');

  // 基础非空校验
  if (!fname || !lname || !birthValue) {
    resultContainer.innerText = '请填写全部必填信息';
    return;
  }

  const birthDate = new Date(birthValue);
  const totalDays = dateDiff(birthDate);

  // 拼接输出内容
  let outputContent = `${fname} ${lname} you have been breathing for ${totalDays} days!`;
  // 校验是否满18岁
  if (totalDays < 365 * 18) {
    outputContent += '<br>You are probably not old enough to take this class!';
  }

  resultContainer.innerHTML = outputContent;
}

三、注意事项 #

• 原生date类型输入框返回的字符串可以直接传入new Date()生成合法日期对象，不需要额外格式转换
• 不要使用document.write输出内容，会直接覆盖整个页面的原有DOM，写入指定容器的兼容性和体验更好

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