如何计算两个Bootstrap日期选择器之间的年份差

在基于Bootstrap的前端项目中，经常需要让用户通过日期选择器选择两个日期，然后计算这两个日期之间的年份差。很多开发者会直接对年份做减法，这种方式在忽略月份和日期的情况下会出现结果偏差，需要采用更严谨的计算逻辑。

核心计算逻辑说明

计算两个日期的年份差不能简单用结束年份减去开始年份，需要结合月份和日期判断：如果结束日期的月份小于开始日期的月份，或者月份相同但结束日期的天数小于开始日期的天数，年份差需要减1。这个逻辑可以保证计算结果的准确性。

Bootstrap日期选择器取值

Bootstrap常用的日期选择器是bootstrap-datepicker，选择日期后会返回格式化的日期字符串，我们可以通过对应的API获取选中的值，再转换为JavaScript的Date对象进行处理。

初始化日期选择器

首先需要在页面中初始化两个日期选择器，分别用于选择开始日期和结束日期：

<div class="form-group">
  <label>开始日期：</label>
  <input type="text" class="form-control" id="startDate">
</div>
<div class="form-group">
  <label>结束日期：</label>
  <input type="text" class="form-control" id="endDate">
</div>
<button type="button" class="btn btn-primary" id="calcBtn">计算年份差</button>
<p>年份差结果：<span id="yearDiff"></span></p>
<!-- 引入相关依赖 -->
<link rel="stylesheet" href="https://ipipp.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ipipp.com/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://ipipp.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ipipp.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ipipp.com/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://ipipp.com/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

初始化代码

对两个输入框初始化日期选择器，设置中文语言，并且限制结束日期不能早于开始日期：

// 初始化开始日期选择器
$('#startDate').datepicker({
  language: 'zh-CN',
  format: 'yyyy-mm-dd',
  autoclose: true
}).on('changeDate', function(e) {
  // 开始日期变化后，更新结束日期的最小可选日期
  $('#endDate').datepicker('setStartDate', e.date);
});

// 初始化结束日期选择器
$('#endDate').datepicker({
  language: 'zh-CN',
  format: 'yyyy-mm-dd',
  autoclose: true,
  startDate: new Date() // 默认最小可选日期为今天，可根据需求调整
});

年份差计算函数实现

接下来实现核心的年份差计算函数，传入两个Date对象，返回准确的年份差：

/**
 * 计算两个日期的年份差
 * @param {Date} startDate 开始日期
 * @param {Date} endDate 结束日期
 * @returns {number} 年份差
 */
function getYearDiff(startDate, endDate) {
  // 先获取两个日期的年份
  const startYear = startDate.getFullYear();
  const endYear = endDate.getFullYear();
  // 计算初始年份差
  let yearDiff = endYear - startYear;
  // 获取月份和日期进行判断
  const startMonth = startDate.getMonth();
  const endMonth = endDate.getMonth();
  const startDay = startDate.getDate();
  const endDay = endDate.getDate();
  // 如果结束月份小于开始月份，或者月份相同但结束日小于开始日，年份差减1
  if (endMonth < startMonth || (endMonth === startMonth && endDay < startDay)) {
    yearDiff -= 1;
  }
  return yearDiff;
}

绑定计算按钮事件

最后给计算按钮绑定点击事件，获取两个日期选择器的值，转换为Date对象后调用计算函数，展示结果：

$('#calcBtn').click(function() {
  // 获取开始日期的值
  const startStr = $('#startDate').val();
  // 获取结束日期的值
  const endStr = $('#endDate').val();
  // 校验是否都选择了日期
  if (!startStr || !endStr) {
    alert('请先选择开始日期和结束日期');
    return;
  }
  // 转换为Date对象
  const startDate = new Date(startStr);
  const endDate = new Date(endStr);
  // 校验日期是否有效
  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
    alert('日期格式不正确，请重新选择');
    return;
  }
  // 计算年份差
  const diff = getYearDiff(startDate, endDate);
  // 展示结果
  $('#yearDiff').text(diff);
});

常见误区说明

很多开发者会直接写endYear - startYear来计算年份差，这种方式在以下场景会出现错误：比如开始日期是2023年10月1日，结束日期是2024年9月30日，直接相减会得到1，但实际两个日期之间不满1年，正确的年份差应该是0。采用上述结合月份和日期判断的逻辑就可以避免这类问题。

另外需要注意，bootstrap-datepicker返回的日期字符串格式需要和Date构造函数的解析格式兼容，本文使用的是yyyy-mm-dd格式，该格式可以被所有现代浏览器正确解析，如果是其他格式需要做对应的格式转换处理。

Bootstrap_date_picker年份差计算JavaScript日期处理前端日期计算修改时间：2026-07-03 17:12:27