本文介绍如何基于 bootstrap datepicker 和 jquery 精确计算两个日期（如 `02/05/2023` 与 `01/04/2027`）之间的整年跨度，并动态显示结果（例如：4 年），避免简单字符串解析或忽略月份/日期导致的逻辑错误。
在实际业务场景中（如合同年限计算、保险有效期校验、员工司龄估算等），常需根据用户通过 Bootstrap Datepicker 选取的「起始日期」和「截止日期」，快速得出二者之间完整的自然年数。一个常见误区是直接用 getFullYear() 相减（如 2027 - 2023 = 4），看似合理，但若起止日期未跨足整年（例如 01/01/2023 到 12/31/2023），该方法仍会返回 1 —— 这显然不符合“满一年才计1年”的业务语义。
✅ 正确做法是：先构造合法 Date 对象，再比较年份差，并结合月份与日期做边界校验，确保仅当截止日期 ≥ 起始日期对应年份的同月同日时，才计入完整年份。
以下为完整、健壮的实现方案：
✅ 推荐实现：精确计算整年差（含边界校验）
<!-- HTML 结构（精简版，保留核心元素） -->
<div class="container mt-4">
<form>
<div class="form-group">
<label>起始日期</label>
<div class="input-group date">
<input type="text" class="form-control" id="startDate" placeholder="dd/mm/yyyy">
<div class="input-group-append"><span class="input-group-text"><i class="fa fa-calendar"></i></span></div>
</div>
</div>
<div class="form-group">
<label>截止日期</label>
<div class="input-group date">
<input type="text" class="form-control" id="endDate" placeholder="dd/mm/yyyy">
<div class="input-group-append"><span class="input-group-text"><i class="fa fa-calendar"></i></span></div>
</div>
</div>
<div class="alert alert-info mt-3">
<strong>合同年限：</strong><span id="yearResult">—</span> 年
</div>
</form>
</div>// 初始化 Bootstrap Datepicker（注意格式匹配）
$(function() {
$('.date').datepicker({
language: 'zh-CN',
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
orientation: 'auto top'
});
});
// 计算并更新年份差
function calculateYears() {
const startInput = $('#startDate').val().trim();
const endInput = $('#endDate').val().trim();
// 校验输入是否为空
if (!startInput || !endInput) {
$('#yearResult').text('—');
return;
}
// 解析日期（支持 dd/mm/yyyy 格式）
const parseDate = (str) => {
const parts = str.split('/');
if (parts.length !== 3) return null;
const [day, month, year] = parts.map(Number);
// 注意：Date 构造函数中 month 是 0-based
return new Date(year, month - 1, day);
};
const startDate = parseDate(startInput);
const endDate = parseDate(endInput);
// 校验日期有效性
if (!startDate || isNaN(startDate.getTime()) ||
!endDate || isNaN(endDate.getTime())) {
$('#yearResult').text('无效日期');
return;
}
// 核心逻辑：计算整年差
let years = endDate.getFullYear() - startDate.getFullYear();
// 若截止日期的月日早于起始日期的月日，则减1年（未满整年）
if (endDate.getMonth() < startDate.getMonth() ||
(endDate.getMonth() === startDate.getMonth() &&
endDate.getDate() < startDate.getDate())) {
years--;
}
// 确保不为负数
years = Math.max(0, years);
$('#yearResult').text(years);
}
// 绑定事件：任一日期变更即触发计算
$('#startDate, #endDate').on('change', calculateYears);⚠️ 关键注意事项
- 不要依赖 parseInt(dateString)：原始代码中 parseInt(tdate) - parseInt(fdate) 完全错误——它把 "01/04/2027" 当作数字解析，结果为 1，毫无意义。
- Date 构造需格式适配：Bootstrap Datepicker 的 dd/mm/yyyy 格式不能直接传给 new Date()（浏览器解析行为不一致），必须手动拆分年月日。
- .html() vs .append()：使用 $('#test').html(years) 替代 .append()，避免重复叠加；否则多次触发后显示 4444。
- 语言与本地化：示例中设为 'zh-CN'，若需西班牙语请改 'es'，并确保对应语言包已加载。
-
边界案例验证：
- 01/01/2023 → 31/12/2023 → 0 年（正确）
- 01/01/2023 → 01/01/2024 → 1 年（正确）
- 15/06/2023 → 14/06/2025 → 1 年（未满2年）
✅ 总结
计算两个日期间的整年差，本质是年份差 + 月日偏移校验。仅用 getFullYear() 相减虽简洁，但业务准确性不足；加入 getMonth() 和 getDate() 的条件判断，才能真正满足合同、服务周期等对“自然年”严谨性的要求。本方案兼容 Bootstrap Datepicker 常见配置，代码清晰、容错性强，可直接集成至生产环境。
