首页 > 代码库 > Bootstrap datepicker 在弹出窗体modal中不工作

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>

 

 <script type="text/javascript" language="javascript">// </script>

<style></style>

<script type="text/javascript" language="javascript">// </script>

 

<style></style>

<script type="text/javascript" language="javascript">// </script>

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