如何在jQuery中计算两个Bootstrap日期选择器的年份差

问题分析 #

你的代码存在两个核心问题：

1. 日期解析错误：原生Date构造函数无法直接识别dd/mm/yyyy格式的字符串，会导致日期对象创建失败或解析偏差。
2. 年份计算逻辑错误：直接将日期字符串转成整数相减完全不符合日期计算逻辑，得到的结果毫无意义。

修正方案 #

关键步骤 #

• 手动拆分dd/mm/yyyy格式的日期字符串，提取日、月、年，用new Date(year, month-1, day)创建正确的日期对象（注意月份是0索引，所以要减1）。
• 年份差计算优先取两个日期的年份差值，若需要严格判断（结束日期的月日早于开始日期时，年份差减1），可额外添加逻辑调整。

完整修正代码 #

<html>
<head>
  <!-- font-awesome -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- datepicker styles -->
  <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">
    <form>
      <!-- Date Picker -->
      <div class="form-group mb-4">
        <div class="datepicker date input-group">
          <input type="text" placeholder="Choose Date" class="form-control" id="fecha1">
          <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
          </div>
        </div>
      </div>
      <!-- // Date Picker -->
      <!-- Date Picker -->
      <div class="form-group mb-4">
        <div class="datepicker date input-group">
          <input onchange="myTest()" type="text" placeholder="Choose Date" class="form-control" id="fecha2">
          <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
          </div>
        </div>
      </div>
      <!-- // Date Picker -->
      <p id="test"></p>
    </form>
  </div>
  <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- Datepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script>
    $(function () {
      $('.datepicker').datepicker({
        language: "es",
        autoclose: true,
        format: "dd/mm/yyyy"
      });
    });
  </script>
  <script>
    function myTest() {
      var fdate = document.getElementById("fecha1").value;
      var tdate = document.getElementById("fecha2").value;

      // 处理空值情况
      if (!fdate || !tdate) {
        document.querySelector('#test').textContent = "请选择完整的起止日期";
        return;
      }

      // 拆分dd/mm/yyyy格式的日期
      const [day1, month1, year1] = fdate.split('/').map(Number);
      const [day2, month2, year2] = tdate.split('/').map(Number);

      // 创建正确的日期对象（月份是0索引，所以减1）
      const date1 = new Date(year1, month1 - 1, day1);
      const date2 = new Date(year2, month2 - 1, day2);

      // 计算年份差
      let years = year2 - year1;

      // 若需要严格判断（结束日期未到开始日期的对应月日时，年份差减1），取消下面注释
      // if (month2 < month1 || (month2 === month1 && day2 < day1)) {
      //   years--;
      // }

      // 更新显示内容
      document.querySelector('#test').textContent = `年份差：${years}年`;
    }
  </script>
</body>
</html>

使用说明 #

• 新增空值判断，避免未选日期时出现错误。
• 手动拆分日期字符串并创建正确的Date对象，彻底解决解析错误问题。
• 输入示例中的02/05/2023和01/04/2027，会显示年份差：4年，完全符合你的需求。
• 如需更精确的年份计算（比如结束日期未到开始日期的对应月日时，年份差减1），可取消代码中的注释部分。

内容的提问来源于stack exchange，提问作者Chinni Ch