bootstrap-datepicker的changeMonth因触发方式不同返回日期结果不一致问题

问题根因 #

你遇到的返回值异常不是配置遗漏导致的，是changeMonth事件的触发时机设计导致的：changeMonth仅响应月份视图切换动作，触发时机早于跨月日期选中后的数值更新逻辑，因此此时调用getFormattedDate拿到的还是切换前的旧日期。

解决方案 #

不要在changeMonth事件中获取最新选中日期，改为在changeDate事件中处理月份变更的相关逻辑，changeDate是日期选中值更新完成后才会触发的事件，能保证拿到最新的选中值。如果需要同时监听月份变更行为，可以额外新增变量记录上一次选中的月份做对比即可。

修正后的代码示例如下：

// 记录上一次选中的月份，用于判断是否发生月份切换
let lastSelectedMonth = null;
$('#calendar').datepicker({
  autoclose: true,
  format: "yyyy-mm-dd",
  updateViewDate: true,
  todayHighlight: false,
  immediateUpdates: true
})
.datepicker('update', '2021-11-29')
.on('changeDate', function(e){
  const currentDate = e.date;
  const currentMonth = currentDate.getMonth();
  // 校验是否发生了月份切换
  if (lastSelectedMonth !== null && currentMonth !== lastSelectedMonth) {
    // 此处可以执行你之前在changeMonth中的逻辑，拿到的都是更新后的日期值
    const updatedContent = $('#show_date').val() + '\n' + currentDate.toString() + " : " + $('#calendar').datepicker('getFormattedDate');
    $('#show_date').val(updatedContent);
  }
  lastSelectedMonth = currentMonth;
});

不同切换操作的表现差异说明 #

• 点击月份名称选择月份、点击箭头逐月切换：这两类操作只有视图切换动作，没有额外的日期点击动作，immediateUpdates配置会在视图切换时直接更新选中日期，因此changeMonth触发时数值已经更新，返回结果符合预期
• 点击跨月的填充日期：此时会先触发月份视图切换（执行changeMonth逻辑，此时选中值还未更新为你点击的新日期），之后才会执行日期选中更新逻辑，因此changeMonth中拿到的是旧值

内容的提问来源于stack exchange，提问作者Shaun Hurley