本文详解如何基于 bootstrap datepicker 获取两个日期间的完整年份差（仅取年份部分相减），避免因日期格式解析错误或方法误用导致结果偏差，并提供可直接运行的完整示例代码与关键注意事项。
在使用 Bootstrap Datepicker 构建日期范围选择功能时，一个常见需求是：根据用户选择的“起始日期”和“结束日期”，快速计算并展示二者之间的整年差值（如 2023–2027 → 4 年）。注意：此处强调的是「年份数值之差」（getFullYear() 直接相减），而非精确到天的完整年龄/间隔计算（如需精确间隔，请用 moment.js 或原生 Date.getTime() 差值换算）。本文聚焦于轻量、准确、可靠的年份差提取方案。
✅ 正确实现逻辑
核心在于两点：
- 安全解析日期字符串：Bootstrap Datepicker 默认输出格式为 "dd/mm/yyyy"（如 "02/05/2023"），而 new Date("02/05/2023") 在部分浏览器中可能被误解析为 "mm/dd/yyyy"。因此，必须先将字符串手动转换为标准格式（yyyy, mm-1, dd）再构造 Date 对象，或确保输入格式被 Date 构造函数稳定识别。
- 仅提取年份并相减：调用 date.getFullYear() 获取整数年份（如 2027），再执行减法运算。该方式简洁、高效，且完全符合“显示合同年限”等业务场景对“整年跨度”的语义要求。
以下为优化后的完整实现（已修复原文中 parseInt(fdate) 等错误逻辑）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap Datepicker 年份差计算</title>
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap Datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
</head>
<body>
<div class="container mt-4">
<h5>年份差计算器（基于 Bootstrap Datepicker）</h5>
<form>
<div class="form-group mb-3">
<label>起始日期</label>
<div class="input-group date datepicker">
<input type="text" class="form-control" id="fecha1" placeholder="请选择起始日期">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group mb-3">
<label>结束日期</label>
<div class="input-group date datepicker">
<input type="text" class="form-control" id="fecha2" placeholder="请选择结束日期" onchange="calculateYears()">
<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">
<strong>年份差：</strong><span id="result">—</span> 年
</div>
</form>
</div>
<!-- JS Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
// 初始化中文日期选择器
$(function() {
$('.datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true
});
});
// 计算年份差
function calculateYears() {
const input1 = $('#fecha1').val().trim();
const input2 = $('#fecha2').val().trim();
// 校验必填
if (!input1 || !input2) {
$('#result').text('—');
return;
}
// 安全解析：将 "dd/mm/yyyy" 转为 Date 对象
const parseDate = (str) => {
const parts = str.split('/');
if (parts.length !== 3) return null;
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1; // 月份从0开始
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
};
const date1 = parseDate(input1);
const date2 = parseDate(input2);
// 校验日期有效性
if (!date1 || !date2 || isNaN(date1.getTime()) || isNaN(date2.getTime())) {
$('#result').text('日期格式错误');
return;
}
// 计算年份差（仅年份数值相减）
const years = date2.getFullYear() - date1.getFullYear();
$('#result').text(Math.max(0, years)); // 确保不为负数
}
</script>
</body>
</html>⚠️ 关键注意事项
- 勿直接 new Date("02/05/2023")：该字符串在 Chrome 中按 mm/dd/yyyy 解析，在 Firefox 中行为不一。务必使用 parseDate() 手动拆分处理，保障跨浏览器一致性。
- .html() vs .append()：使用 $('#result').html(...) 替代 .append()，避免重复追加内容；同时建议初始化时设为 '—' 提升用户体验。
- 边界情况处理：添加空值校验、日期有效性检查（isNaN(date.getTime())）及负值防护（Math.max(0, years)），防止异常输入导致界面错乱。
- 语言与本地化：通过引入 bootstrap-datepicker.zh-CN.min.js 并设置 language: 'zh-CN'，确保日历显示符合中文习惯。
- 扩展建议：若需支持“是否满整年”逻辑（例如 2023-06-01 至 2027-05-31 应返回 3 而非 4），则需比较月日，此时推荐使用 Luxon 或原生 Date 的 getMonth()/getDate() 组合判断。
该方案轻量、健壮、开箱即用，适用于合同年限、会员有效期、统计周期等典型业务场景。
