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

Posted 2023-05-07

【中文标题】模式中的引导日期选择器不起作用

【英文标题】：Bootstrap datepicker in modal not working

【发布时间】：2016-05-18 01:39:39

【问题描述】：

我已经尝试用谷歌搜索类似的问题，但到目前为止还没有找到任何东西。 我有一个问题，我从 jquery 创建并打开一个模式并尝试访问日期选择器，但是它没有激活 datepickers 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 来创建模式？

干杯

【问题讨论】：

你需要在$("#myModal .modal-body").html(之后调用$('.input-group.date').datepicker(。

Twitter Bootstrap Datepicker within modal window的可能重复

【参考方案1】：

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

将 datepicker 的 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>

注意：我为演示添加了 bootstrap v3.3.6 CSS 并删除了对 tablesorter 脚本的本地引用。

【讨论】：

这也不起作用 - 打开模态，但在单击日期选择器时未达到 shown.bs.modal。

@Craig 我的示例在单击日期选择器后但在显示模式后无法到达事件 - 尝试在事件侦听器中添加 console.log('test') 并检查它是否已触发。另一方面：选择器.input-group.date 是否正确。像这样.input-group .date之间不应该有空格吗？或者删除.date 进行测试。如果您也可以提供标记。也许这有助于发现问题。

没关系 - 我忘了标记已经在那里了。请检查事件是否被触发。

太棒了，非常感谢您发现它！是时候让我了解 z-index 是什么，以及它为什么会导致这样的问题！再次感谢您。

这对我帮助很大，伙计...谢谢:)

【参考方案2】：

你必须在模态加载后调用日期选择器：

$("[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 函数

【参考方案3】：

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

【参考方案4】：

它对我有用！

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

【参考方案5】：

在样式标签中，输入以下内容即可。模态的 z-index 超过了 datepicker 的 z-index。所以将日期选择器的 z-index 放在 9999

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

【参考方案6】：

您需要在Modal shown event 上启动日期选择器

【参考方案7】：

当使用 bootstrap（使用 bootstrap 4.3.1 测试）和 jquery (3.4.1) jquery ui (1.12.1) 作为 datepicker 和 modal。日期选择器将在模态中正常工作。

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

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

.form-control.datepicker  position:unset

或者不使用表单控件类

【参考方案8】：

$(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
  );
)

【讨论】：

这也不起作用 - 打开模态，但在单击日期选择器时未达到 shown.bs.modal。

【参考方案9】：

这是由z-index引起的， 现在你可以在你的styles.css中手动设置日期选择器的z-index

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

【参考方案10】：

默认情况下，模态 z-index 为 2050。您的日期选择器 z-index 应大于模态 z-index。

喜欢：

.datepicker 
    z-index: 2051 !important;