Bootstrap datepicker设setStartDate后十年/世纪视图卡顿选年异常

问题现象 #

调用bootstrap-datepicker的setStartDate方法将可选起始日期设为2021年11月后，点击切换到十年视图、世纪视图时组件交互卡顿，无法选中2021、2022这类本身属于合法可选范围的年份。

根因定位 #

问题出在组件的区间禁用判断逻辑：当设置的起始日期为2021年时，十年视图中代表2020-2029整个十年区间的入口（显示为2020）被判定为早于起始日期直接整体禁用，导致该区间内所有符合可选规则的年份都无法进入选择流程。

问题截图 #

复现示例 #

JS逻辑 #

let d = new Date('08/11/2021');
$('.datepicker').datepicker({
    todayBtn: "linked",
    clearBtn: true,
    format: 'd MM yyyy'
}).datepicker('setStartDate', d);

页面结构与依赖引入 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="form-group">
  <label for="input" class="form-control-label">Date</label>
  <div class="input-group">
    <input class="form-control datepicker" placeholder="d M yyyy" type="text" name="waktu_bayar" id="input" data-date-end-date="0d">
    <div class="input-group-append">
      <span class="input-group-text"><i class="ni ni-calendar-grid-58 px-1"></i></span>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

修复方案 #

• 方案1：修改组件源码中十年/世纪视图的禁用判断逻辑，不再以区间首年份是否早于startDate作为整个区间的禁用依据，只要区间内存在任意可选日期，就保留区间入口的可点击状态。
• 方案2：不修改源码的前提下，通过组件提供的beforeShowDecade、beforeShowCentury回调，遍历视图内的十年/世纪区间项，判断区间内是否存在可选日期，存在则移除对应项的disabled类，保证可以正常点击进入区间选择年份。

内容的提问来源于stack exchange，提问作者Jafar Pager Jaya