Bootstrap模态框表单内jQuery datepicker点击不显示问题求助

问题原因 #

你遇到的datepicker不显示问题主要由以下几个错误导致：

• jQuery被重复引入3次（head的3.4.0、模态框前的1.12.4、页面末尾的3.4.0），重复引入会覆盖之前挂载的jQuery UI插件，导致datepicker方法失效
• 混淆了jQuery UI datepicker和Bootstrap datepicker的参数，你写的parentEl是Bootstrap datepicker的参数，jQuery UI datepicker对应的参数是appendTo
• datepicker初始化时机错误，且配置的容器id和实际模态框id不匹配（你写的#dispatch_modal不存在，实际模态框id是modalAddContract）
• jQuery UI datepicker默认z-index低于Bootstrap模态框的z-index，导致组件被模态框遮挡
• 同时引入了Bootstrap3和Bootstrap4的JS文件，版本冲突会导致模态框交互异常

修复步骤 #

1. 清理重复和冲突的依赖 #

删除以下多余引入代码：

<!-- 模态框前重复引入的旧版jQuery和Bootstrap3 JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 页面末尾重复引入的jQuery 3.4.0 -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>

保留head里唯一一份jQuery 3.4.0即可，同时确保jQuery UI的CSS和JS引入放在jQuery引入之后。

2. 修正datepicker初始化逻辑 #

把原来的初始化代码替换为以下内容，监听模态框的shown.bs.modal事件（模态框完全显示后触发）再初始化datepicker，配置正确的挂载容器和z-index：

$(function() {
  // 监听模态框显示完成事件
  $('#modalAddContract').on('shown.bs.modal', function () {
    $("[data-toggle='datepicker']").datepicker({
      dateFormat: 'yy-mm-dd',
      appendTo: '#modalAddContract .modal-body', // 挂载到当前模态框内部
      zIndex: 1060 // 高于Bootstrap模态框默认的1050
    });
  });
  // 模态框关闭时销毁datepicker，避免重复初始化
  $('#modalAddContract').on('hidden.bs.modal', function () {
    $("[data-toggle='datepicker']").datepicker('destroy');
  });
});

3. 可选兜底修复 #

如果做完以上步骤还是不显示，可以加一句CSS强制提高datepicker的层级，避免被遮挡：

.ui-datepicker {
  z-index: 1060 !important;
}

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