如何修复模态框内日期选择器的年月下拉框无法切换问题？

我之前也碰到过模态框里Datepicker年月切换失效的情况，大概率是模态框层级覆盖或者事件被模态框拦截导致的，给你几个针对性的解决方案：

1. 强制提高Datepicker弹出层的层级 #

模态框默认的z-index一般都比较高，很容易把Datepicker的年月选择按钮盖住，导致点击没反应。你可以通过CSS直接拉高Datepicker相关元素的层级：

/* 针对jQuery UI Datepicker的样式调整 */
.ui-datepicker {
  z-index: 9999 !important;
}
.ui-datepicker-header {
  z-index: 10000 !important;
}

如果用的是Bootstrap Datepicker或者其他库，你可以右键检查年月按钮所在的弹出层，找到对应的类名，再设置更高的z-index值就行。

2. 阻止事件冒泡到模态框 #

有些模态框会阻止内部元素的事件冒泡，导致Datepicker的点击事件无法触发。你可以给年月切换按钮手动绑定事件，阻止冒泡并触发切换逻辑：

// 以jQuery UI Datepicker为例
$(document).on('click', '.ui-datepicker-prev, .ui-datepicker-next', function(e) {
  e.stopPropagation(); // 不让事件传到模态框
  const datepickerInstance = $('#sel_periode_1').datepicker('instance');
  // 手动触发年月切换
  if ($(this).hasClass('ui-datepicker-prev')) {
    datepickerInstance.prevMonth();
  } else {
    datepickerInstance.nextMonth();
  }
  datepickerInstance.refresh(); // 刷新日期面板
});

3. 延迟初始化Datepicker #

如果你的模态框是动态渲染的（比如点击按钮才生成），页面加载时就初始化Datepicker可能会绑定到不存在的元素上，或者上下文不对。你可以等模态框完全显示后再初始化：

// 以Bootstrap模态框为例，监听显示完成事件
$('#你的模态框ID').on('shown.bs.modal', function() {
  $('#sel_periode_1').datepicker({
    changeMonth: true, // 确保开启年月切换功能
    changeYear: true,
    // 其他你的配置项
  });
});

4. 排查JS冲突 #

如果上面的方法都没用，可能是页面里其他脚本和Datepicker冲突了。你可以先把其他非必要的脚本注释掉，测试Datepicker是否正常，逐步排查出冲突的脚本。

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