本文详解如何基于 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() 组合判断。
该方案轻量、健壮、开箱即用，适用于合同年限、会员有效期、统计周期等典型业务场景。