JavaScript日期区间计算：精准解析年月日差异

惠赢的

已于 2025-03-19 10:18:02 修改

阅读量441

点赞数 7

文章标签： javascript 开发语言 ecmascript

于 2025-03-18 21:39:42 首次发布

本文链接：https://blog.youkuaiyun.com/QQ1257871322/article/details/146353248

版权

一、应用场景与功能概述

在日常的制作项目或者是练习，我们经常需要计算两个日期之间的精确时间差。本文将通过一个JavaScript日期计算函数，详细解析如何实现精准的年/月/日差异计算，并探讨实际开发中的常见问题和解决方案。

二、核心功能解析

1. 日期获取与转换

let startDateStr = $("#add_start_date").val();
let endDateStr = $("#add_end_date").val();
let startDate = new Date(startDateStr);
let endDate = new Date(endDateStr);

使用jQuery获取输入框的值
将字符串转换为Date对象
注意：不同浏览器对日期字符串解析存在差异

2. 基础差值计算

let years = endDate.getFullYear() - startDate.getFullYear();
let months = endDate.getMonth() - startDate.getMonth();
let days = endDate.getDate() - startDate.getDate();

3. 借位处理机制

天数借位场景（当结束日期的天数小于起始天数时）：

if (days < 0) {
  let lastMonth = new Date(endDate);
  lastMonth.setMonth(lastMonth.getMonth() - 1);
  days += new Date(
    lastMonth.getFullYear(),
    lastMonth.getMonth() + 1,
    0
  ).getDate();
  months--;
}

月份借位处理：

if (months < 0) {
  months += 12;
  years--;
}

4. 有效性校验

// 计算总天数差异
let totalDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));

if (totalDays < 30) {
  showError("保质期不能少于30天");
  endSclear();
  return;
}

三、格式化输出逻辑

动态显示策略

let result;
if (years == 0) {
  result = `${formatNumber(months)}月${formatNumber(days)}天`;
  if (months == 0) {
    result = `${formatNumber(days)}天`;
  }
} else {
  result = `${years}年${formatNumber(months)}月${formatNumber(days)}天`;
}

格式化函数

let formatNumber = (num) => num.toString().padStart(2, "0");

显示结果

		<input type="date" id="add_start_date" onchange="calculateDateRange()" />
		<input type="date" id="add_end_date" onchange="calculateDateRange()" />
		<input type="text" id="warranty_input"/>

给开始时间和结束时间都绑定onchange事件，之后判断该两个输入框中都不为空的时候渲染出相差的事件就可以了，但是其中还是需要添加一下判断。

例如，结束时间不能低于开始时间的判断，或者是最低时间不能低于30天时间之类的，都是后续可以自行添加的

希望这篇博客对你有所帮助！如果有任何问题或建议，欢迎留言讨论。