如何使用JavaScript计算两个日期加时间的小时时长并解决NaN问题

问题原因 #

• HTML5 <input type="date"> 组件返回的日期格式为 YYYY-MM-DD，你直接将其和HH:mm:ss格式的时间字符串拼接时，得到的是类似2024-05-2000:00:00的非法格式字符串，JS的Date构造函数无法识别，会生成无效日期对象，调用getTime()方法自然返回NaN。
• 现有代码只监听了时间下拉框的变更事件，如果用户先选时间再修改日期，时长不会自动更新，存在逻辑漏洞。

修正方案 #

我们只需要在拼接日期和时间时添加一个空格，补充参数完整性、日期有效性判断，同时优化重复代码即可：

$(document).ready(function() {
  // 抽离公共计算逻辑，避免重复代码
  function calcDuration() {
    var startDate = $('#FromDate').val();
    var endDate = $('#ToDate').val();
    var startTime = $('#FromTime').val();
    var endTime = $('#ToTime').val();

    // 所有参数填写完整才执行计算
    if (!startDate || !endDate || !startTime || !endTime) {
      $('#duration').val('');
      return;
    }

    // 拼接符合标准的日期时间字符串，日期和时间之间加空格
    var timeStart = new Date(`${startDate} ${startTime}`);
    var timeEnd = new Date(`${endDate} ${endTime}`);

    // 二次判断日期有效性，避免异常
    if (isNaN(timeStart.getTime()) || isNaN(timeEnd.getTime())) {
      $('#duration').val('');
      return;
    }

    // 计算小时差，单位毫秒转小时后向下取整
    var diffMs = timeEnd.getTime() - timeStart.getTime();
    var diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    // 可自定义结束时间早于开始时间的处理逻辑，这里默认返回0，也可以替换为错误提示
    $('#duration').val(diffHours >= 0 ? diffHours : 0);
  }

  // 同时监听日期、时间的变更事件，覆盖所有用户操作场景
  $('#FromDate, #ToDate, #FromTime, #ToTime').on('change', calcDuration);
});

注意事项 #

• 如果需要兼容极低版本浏览器，可以将日期中的横杠替换为斜杠提升兼容性：var timeStart = new Date(startDate.replace(/-/g, '/') + ' ' + startTime)
• 代码天然支持跨天时长计算，不需要额外处理跨天逻辑
• 请确保页面中存在id为duration的输入框，用于展示计算结果
• 如果需要保留小数位的小时结果，把Math.floor替换为toFixed(小数位数)即可，比如保留1位小数：(diffMs / (1000 * 60 * 60)).toFixed(1)

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