首页 > 代码库 > 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中不工作
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。