本文介绍如何基于 bootstrap datepicker 和 jquery，准确计算用户在两个日期输入框中选择的起止日期之间的完整年份数（仅取年份差，忽略月日细节），并提供可直接运行的完整示例代码与关键注意事项。
在实际业务场景中（如合同年限计算、年龄估算、服务周期展示等），常需快速获取两个日期之间的“年份跨度”。需要注意的是：此处的“年份差”通常指纯年份数值相减（即 endYear - startYear），而非精确到天的完整年数（如 moment.js 的 .diff('year', true)）。 本教程聚焦于简洁、高效、兼容性好的原生方案，适用于 Bootstrap Datepicker v1.9+ 与 jQuery 环境。
✅ 正确实现逻辑
核心思路是：
- 获取两个 元素的日期字符串值（格式为 dd/mm/yyyy）；
- 使用 new Date(dateString) 解析为 JavaScript Date 对象；
- 调用 .getFullYear() 提取年份（返回整数，安全可靠）；
- 直接相减得到年份差，并写入目标元素。
⚠️ 关键修正点（原代码常见错误）：
- ❌ 错误地对整个日期字符串调用 parseInt()（如 parseInt("02/05/2023") → 2），导致结果完全失真；
- ❌ 使用 .append() 向
中追加内容，造成多次触发时数字堆叠（如 444）；应使用 .html() 或 .text() 替换全部内容；
- ❌ 未处理空值或无效日期，可能导致 NaN；建议添加容错判断。
? 完整可运行示例
以下为精简优化后的 HTML + JS 示例（已验证兼容 Chrome/Firefox/Edge）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 日期年份差计算</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 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 class="container mt-4">
<h4>计算两个日期之间的年份差</h4>
<form>
<div class="form-group mb-3">
<label>起始日期</label>
<div class="input-group date">
<input type="text" class="form-control" id="fecha1" 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 mb-3">
<label>结束日期</label>
<div class="input-group date">
<input type="text" class="form-control" id="fecha2" placeholder="dd/mm/yyyy" 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>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.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() {
$('.date').datepicker({
language: 'zh-CN',
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true
});
});
function calculateYears() {
const $from = $('#fecha1');
const $to = $('#fecha2');
const fromVal = $from.val().trim();
const toVal = $to.val().trim();
// 容错：任一为空则清空结果
if (!fromVal || !toVal) {
$('#result').text('—');
return;
}
const date1 = new Date(fromVal);
const date2 = new Date(toVal);
// 验证日期有效性
if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
$('#result').text('无效日期');
return;
}
const years = date2.getFullYear() - date1.getFullYear();
$('#result').text(Math.max(0, years)); // 确保不为负数
}
</script>
</body>
</html>? 注意事项与进阶建议
- 格式强依赖：本方案要求 format: "dd/mm/yyyy" 与 new Date("dd/mm/yyyy") 兼容。现代浏览器普遍支持该格式解析，但若需更高兼容性（如旧版 IE），建议使用 moment.js 或手动拆分字符串解析。
- 语义化说明：此方法计算的是“日历年份差”，例如 01/01/2023 到 31/12/2024 返回 1（而非 1.99），符合多数业务对“合同年限”“服务期”的理解。
- 双向联动增强：可扩展为监听两个输入框（onchange + onblur），并在任一日期变更时实时更新结果。
- 国际化适配：通过 language: 'zh-CN' 加载对应 locale 文件，确保日历显示本地化（星期、月份名称等）。
掌握这一轻量级实现，即可在不引入重型时间库的前提下，稳健完成常见年份跨度计算需求。
