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>

转载于:https://www.cnblogs.com/z_lb/p/6681823.html

Bootstrap datepicker 在弹出窗体modal中不工作相关推荐

线程中使用SaveFileDialog不能弹出窗体
在子线程中使用 SaveFileDialog 无法弹出窗体,主要是我们需要用主线程去处理 SaveFileDialog , 我们可以将子线程进行如下设置: public partial class F ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...
php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
bootstrap模态框弹出居中显示
在项目中,有几个使用bootstrap模态框弹出问题,在单页面上是居中显示,但是嵌套在别的iframe中,弹出的位置在靠近顶部的位置. 查阅了一些资料,有几种解决方案,1修改bootstrap的js文 ...
android 初学者实现 popupwindow的自动弹出,Android popupWindow弹出窗体实现方法分析
本文实例讲述了Android popupWindow弹出窗体实现方法.分享给大家供大家参考,具体如下: 1. 建立popupwindow显示的布局页面(普通的view任意布局) android:lay ...
Ext入门学习系列（二）弹出窗体
第二章弹出窗体上节学习了Ext的环境搭建和最基本的一个操作--弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...
fancybox关闭弹出窗体parent.$.fancybox.close();
fancybox弹出窗体右上角会自带一个关闭窗体,而且点击遮罩层也会关闭fancybox 有时我们不须要这样进行关闭,隐藏关闭窗体,而且遮罩层不可点击在弹出窗体页面加一链接进行关闭使用parent ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...

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

Bootstrap datepicker 在弹出窗体modal中不工作相关推荐

最新文章

热门文章