Modal中jQuery Date picker无法正常工作的问题求助

先梳理你现有尝试中的问题：

• 第一个方案里使用了.date选择器，但你的输入框类是.datepicker，选择器不匹配导致初始化失败
• 第二个方案依赖setTimeout的延迟初始化不可靠，且未处理日期选择器弹窗被模态框遮挡的层级问题

以下是两种可靠的解决方案：

方案1：修正选择器+利用Bootstrap模态框事件初始化 #

针对静态模态框（输入框已提前写在模态框HTML中），使用Bootstrap模态框的shown.bs.modal事件（模态框完全显示后触发）来初始化，同时调整日期选择器的层级避免被遮挡：

// 替换为你实际的模态框ID
$('#exampleModal').on('shown.bs.modal', function () {
  // 先销毁可能存在的旧实例，避免重复初始化冲突
  $(".datepicker").datepicker("destroy");
  // 重新初始化日期选择器，配置minDate并设置层级
  $(".datepicker").datepicker({
    minDate: 0,
    beforeShow: function(input, inst) {
      // 将日期选择器弹窗的z-index设为高于Bootstrap模态框（默认1050）
      inst.dpDiv.css('z-index', 99999);
    }
  });
});

方案2：处理动态生成的模态框内容 #

如果模态框内的.datepicker输入框是动态加载的（比如通过AJAX渲染），需要在内容完全插入DOM后再执行初始化：

// 打开模态框的按钮点击事件
$("#openbtn").on('click', function() {
  // 示例：如果是AJAX加载模态框内容
  // $.get('/path/to/modal-content', function(content) {
  //   $('#exampleModal .modal-body').html(content);
  //   // 内容插入后立即初始化
  //   initDatepicker();
  // });

  // 静态模态框直接显示
  $('#exampleModal').modal('show');
});

// 封装日期选择器初始化函数
function initDatepicker() {
  $(".datepicker").datepicker("destroy");
  $(".datepicker").datepicker({
    minDate: 0,
    beforeShow: function(input, inst) {
      inst.dpDiv.css('z-index', 99999);
    }
  });
}

// 绑定模态框显示完成事件，兼容静态/动态内容
$('#exampleModal').on('shown.bs.modal', initDatepicker);

额外检查项 #

• 确保模态框ID统一：你现有代码中混用了#myModal和#exampleModal，需替换为实际项目中的模态框ID
• 确认jQuery与jQuery UI加载顺序：必须先加载jQuery，再加载jQuery UI（你的现有HTML已正确处理）
• 避免重复加载不同版本的jQuery：页面中如果存在多个jQuery实例，会导致Datepicker无法正常绑定

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