解決辦法

在 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>

?

?

?

轉載于:https://www.cnblogs.com/z_lb/p/6681823.html

總結

以上是生活随笔為你收集整理的Bootstrap datepicker 在弹出窗体modal中不工作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。