解决datetime-local输入值相减返回NaN问题，计算时分时间差

datetime-local类型输入框的value是ISO格式的字符串（例如2024-05-20T14:30），直接对字符串做减法运算会返回NaN。必须先将其转换为JavaScript的Date对象，通过Date对象的**时间戳（毫秒数）**来计算时间差。

完整实现代码 #

HTML部分（保留原有结构）

<div class="form">
  <input type="text" value="Heure début" />
  <input type="datetime-local" id="begin-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <input type="text" value="Heure fin" />
  <input type="datetime-local" id="end-time" name="meeting-time" value="" min="2018-06-07T00:00"
            max="2022-06-14T00:00"><br />
  <p id="difference"></p>
  <v-btn @click="differenceTime()">VALIDER</v-btn>
</div>

JavaScript/Vue方法实现

methods: {
  differenceTime() {
    // 获取输入框的时间字符串
    const beginStr = document.getElementById('begin-time').value;
    const endStr = document.getElementById('end-time').value;

    // 验证输入是否完整
    if (!beginStr || !endStr) {
      document.getElementById('difference').textContent = "请选择完整的开始和结束时间";
      return;
    }

    // 将字符串转换为Date对象
    const beginDate = new Date(beginStr);
    const endDate = new Date(endStr);

    // 验证Date对象是否有效（避免无效时间导致的NaN）
    if (isNaN(beginDate.getTime()) || isNaN(endDate.getTime())) {
      document.getElementById('difference').textContent = "请选择有效的时间";
      return;
    }

    // 计算时间差（毫秒）
    const diffMs = endDate.getTime() - beginDate.getTime();

    // 转换为小时和分钟
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

    // 渲染结果到页面
    if (diffMs < 0) {
      document.getElementById('difference').textContent = `结束时间不能早于开始时间`;
    } else {
      document.getElementById('difference').textContent = `时间差：${diffHours}小时 ${diffMinutes}分钟`;
    }
  }
}

关键说明 #

• 字符串转Date：new Date(datetimeStr)会自动解析datetime-local返回的ISO格式字符串，生成对应的时间戳（从1970年1月1日至今的毫秒数），此时就可以正常做减法运算。
• 有效性校验：必须先检查输入是否为空，以及转换后的Date对象是否有效（避免用户输入不合法的时间导致计算出错）。
• 时间差转换：毫秒数转小时/分钟的逻辑是：1小时=3600000毫秒，1分钟=60000毫秒，通过取整和取余得到对应的数值。

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