Bootstrap-datepicker切换年份时show事件未触发问题求助

问题场景 #

我基于bootstrap-datepicker自定义半年历，通过修改语言配置将默认的12个月份替换为H1、H2两个半年选项，代码如下：

$.fn.datepicker.dates['halfyears']={
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  months: ["H1", "H2"],
  monthsShort: ["                   H1                " , "                   H2                "],
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy",
  weekStart: 0
};

let that=this;
$('#date-picker-input').datepicker({
    format: "MM yyyy",
    minViewMode: 1,
    autoclose: true,
    language: "halfyears",
    forceParse: false,
}).on("show", function(event) {
 $(".month").css({"width" : "100%"}).each(function(index, element) {
   if (index > 1) $(element).hide();
 });
})

自定义后日历仅显示H1、H2两个占满宽度的选项，但点击日历左右箭头切换年份时，show事件并未触发，导致切换后多余的月份无法被隐藏。

问题原因 #

bootstrap-datepicker的show事件仅在日历初次弹出时触发，切换年份/月份属于日历内部的视图更新操作，不会触发show事件，对应的触发事件是changeYear、changeMonth或更通用的update事件。

解决方案 #

把隐藏多余月份的逻辑封装成独立函数，同时绑定到show和changeYear事件上（如果需要兼容其他视图更新，也可以用update事件）：

$.fn.datepicker.dates['halfyears']={
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  months: ["H1", "H2"],
  monthsShort: ["H1", "H2"], // 去掉冗余空格，用CSS控制宽度更优雅
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy",
  weekStart: 0
};

// 封装隐藏多余月份的逻辑
function handleMonthDisplay() {
  $(".month").css("width", "100%").each(function(index) {
    $(this).toggle(index <= 1); // 显示前2个，隐藏其余
  });
}

$('#date-picker-input').datepicker({
    format: "MM yyyy",
    minViewMode: 1,
    autoclose: true,
    language: "halfyears",
    forceParse: false,
})
.on("show", handleMonthDisplay) // 初次弹出时执行
.on("changeYear", handleMonthDisplay); // 切换年份时执行

额外优化建议 #

1. 移除monthsShort里的大量空格，直接用CSS设置.month的宽度为100%，避免硬编码的冗余和适配问题。
2. 如果需要覆盖所有视图更新场景（比如手动切换月份等），可以把changeYear换成update事件，它会在日历任何视图更新时触发：

.on("update", handleMonthDisplay);

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