模式中的引导日期选择器不起作用

Bootstrap datepicker in modal not working

本文关键字：日期 选择器 不起作用 模式      更新时间：2023-09-26

我试图谷歌搜索SO类似的问题，但还没有找到任何东西。我有一个问题，我从 jquery 创建和打开一个模式并尝试访问日期选择器，但它不会激活日期选择器 JS。

$("[id=add]").click(function () {
    $("#myModal .modal-header h4").html("Request for Change");
    $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
    $("#myModal").modal("show");
});

（对长行长度表示歉意，但是我已经尽可能多地删除了 - 现在只显示与问题相关的代码。

我在顶部引用了这些脚本：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>

在与上面的jquery函数相同的<script> </script>标签中，在最顶部我有：

$('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
});

我以类似的方式使用这段代码（除了没有 jquery 模式 - 只是在 cshtml 页面上）可以正常工作。我不知道为什么这种方式行不通。我已经使用开发人员工具来尝试跟踪问题，但没有错误 - 脚本正确加载，但是当单击"所需日期"时，它不会触发到日期选择器的 jquery 中。

我使用 Jquery html 创建模态是错误的吗？

干杯

日期选取器隐藏在模态后面。

将日期选择器的z-index设置为1050模态之上。

此外，将您的日期选取器代码包装在引导程序的模式显示事件中。

$('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});
$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
  $("#myModal").modal("show");
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<style>
    .datepicker {
      z-index: 1600 !important; /* has to be larger than 1050 */
    }
</style>
<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

注意：我添加了引导程序 v3.3.6 CSS，并删除了对演示的表排序器脚本的本地引用。

那么，你必须在模式加载后调用日期选择器：

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
  $("#myModal").modal("show");
  $('#myModal').on('shown.bs.modal', function(e) {
    $('.input-group.date').datepicker({
      format: "dd/mm/yyyy",
      startDate: "01-01-2015",
      endDate: "01-01-2020",
      todayBtn: "linked",
      autoclose: true,
      todayHighlight: true
    });
  });
});

$('#myModal').on('shown.bs.modal', function (e) {
     $('.date').datepicker();
});

它对我有用！

$('#modal_form_horizontal').on('shown.bs.modal', function() {
    $('.daterangepicker').css('z-index','1600');
});

在样式标签中，输入以下内容，它起作用了。模态的 z 索引超过日期选取器的 z 索引。因此，将日期选择器的 z 索引放在 9999

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

您需要在模态显示事件上启动日期选取器

当使用引导程序（使用 bootstrap 4.3.1 测试）和 jquery （3.4.1） jquery ui （1.12.1） 作为日期选择器和模态时。日期选择器在模态中工作正常。

除非您还在元素输入中使用类表单控件（引导程序）。来自引导的 css 将使用 css 位置设置输入：相对。此时，日期选择器将不再可见。

解决此问题的另一个方法是：

.form-control.datepicker  {position:unset}

或不使用窗体控件类

$(document).on('click','#add',function(){
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
  });
})

它是由 z 索引引起的，现在，您可以在样式中手动设置日期选择器的 z 索引.css

/*Date picker container*/ bs-datepicker-container { z-index: 3000; }

默认情况下，模态 z 指数为 2050。日期选取器 z 索引应大于模态 z 索引。

喜欢：

.datepicker {
    z-index: 2051 !important;
}
相关文章：