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>