javascript – 模态中的Bootstrap datepicker无法正常工作

我试图谷歌搜索SO以寻找类似的问题,但还没有发现任何东西.
我有一个问题,我从 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函数,在最顶层我有：

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

我有这样的代码以类似的方式使用(除了没有jquery模式 – 只是在cshtml页面上),它正常工作.我不知道为什么这种方式不起作用.我已经使用开发人员工具来尝试跟踪问题,但是没有错误 – 脚本正确加载但是当单击Date required时它不会触发datepicker的jquery.

我是否使用Jquery html错误来创建模态？

干杯

解决方法

datepicker隐藏在模态之后.

将datepicker的z-index设置在模态的1050之上.

另外将你的日期选择器代码包装在bootstrap的模态显示事件中.

$('#myModal').on('shown.bs.modal',function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",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并删除了对demo的tablesorter脚本的本地引用.