如何通过HTML表单date输入计算起始日期与结束日期的时间差

原有代码的核心问题 #

• 获取到的input[type=date]的value是YYYY-MM-DD格式的字符串，无法直接做数值运算，需要先转换为Date对象
• 缺少触发计算的事件逻辑，没有绑定日期变化/提交的触发条件
• 计算得到的时间差默认是毫秒单位，需要根据需求转换为天/小时等可读单位
• 赋值逻辑错误：直接给duration_from_form变量赋值不会同步到输入框，需要主动给input的value属性赋值

正确实现步骤 #

1. 给两个日期输入框绑定change事件，只要日期修改就自动触发计算
2. 拿到两个日期的字符串值后，转为Date对象再做差值计算
3. 将毫秒级差值转换为需要的单位，比如按天计算的话除以1000 * 60 * 60 * 24，取整即可
4. 将计算结果赋值给时长输入框的value属性

修正后的完整代码示例 #

HTML部分 #

<div>
  <form>
    <label for="start-date">开始日期：</label>
    <input type="date" id="start-date">

    <label for="end-date">结束日期：</label>
    <input type="date" id="end-date">

    <label for="duration">间隔时长（天）：</label>
    <input type="text" id="duration" readonly>
  </form>
</div>

JavaScript部分 #

// 获取所有DOM元素
const startDateInput = document.getElementById("start-date");
const endDateInput = document.getElementById("end-date");
const durationInput = document.getElementById("duration");

// 计算时长的核心方法
function calculateDuration() {
  const startVal = startDateInput.value;
  const endVal = endDateInput.value;
  // 两个日期都选中才执行计算
  if (!startVal || !endVal) {
    durationInput.value = "";
    return;
  }
  // 把字符串日期转为Date对象
  const startDate = new Date(startVal);
  const endDate = new Date(endVal);
  // 计算毫秒差，结束日期早于开始日期时取绝对值
  const diffMs = Math.abs(endDate - startDate);
  // 转换为天数，可根据需求调整除数获取其他单位
  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
  // 把结果写入输入框
  durationInput.value = diffDays;
}

// 绑定触发事件，两个日期修改时都自动计算
startDateInput.addEventListener('change', calculateDuration);
endDateInput.addEventListener('change', calculateDuration);

核心API说明 #

• input[type=date]输入项的value属性始终返回符合ISO 8601格式的YYYY-MM-DD字符串，无输入时返回空字符串
• Date对象做减法运算时会自动转换为对应的毫秒级时间戳进行计算
• 若需要计算小时、分钟等其他单位，调整毫秒转换的除数即可：
  • 小时：1000 * 60 * 60
  • 分钟：1000 * 60

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