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

2023-12-23

我试图用谷歌搜索并搜索类似的问题,但到目前为止还没有找到任何东西。 我有一个问题,我从 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>

并且在同一个<script> </script>标记为上面的 jquery 函数,在最顶部我有:

$('.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 来创建模式是否错误?

Cheers


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

设置日期选择器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 脚本的本地引用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

模式中的 Bootstrap 日期选择器不起作用 的相关文章

随机推荐