Bootstrap datepicker 在弹出窗体modal中不工作

解决办法

在 show 方法后面 添加 下面一段代码

 $('#modalCard').modal('show');—例子 打开 弹出窗体

//$('#modalCard').modal('hide');

$('#modalCard').on('shown.bs.modal', function () {

//$('.input-group.date').datetimepicker({

$('#dpReceiveDate').datetimepicker({

                format: "yyyy-MM-dd",

//startDate: "01-01-2015",

                //endDate: "01-01-2020",

                //todayBtn: "linked",

                //autoclose: true,

                //todayHighlight: true,

language: 'zh-CN',

                pickTime: false,

                container: '#modalCard modal-body'

});

        });

 

$('#myModal').modal('show');

$('#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></div>');
  $("#myModal").modal("show");
});

并且 在 样式中 改变 datepicker 的z-index 值

<style>

.datepicker {

z-index: 1600 !important; /* has to be larger than 1050 */

}

.bootstrap-datetimepicker-widget 

{

z-index: 1601   !important;

    }

</style>