bootstrap datepicker 在bootstrap modal中不显示问题
伏欣悦
在普通的网页中显示datepicker比较简单，将bootstrap-datepicker-zh_CN.js 和 bootstrap-datepicker.css
拷贝到rails工程中相应的assets目录中，并在application.js 和 application.css文件中加载这两个文件
//= require bootstrap-datepicker-zh_CN
*= require bootstrap-datepicker
最后在 在指定的文本域中加入事件即可$("#dp1, #dp2, #dp3").datepicker()
在使用bootstrap modal的时候，把表单的内容放在了modal中，但是日期控件的显示总是在最底层
解决办法：在.datepicker 中加上z-index的控制，css中z-index是用来控制预算的堆叠顺序的，默认是auto
也就是说通过它可以设置datepicker控件的堆叠顺序，这里把z-index设置为 9999，就可以保证日期控件总
是显示在最前端了
修改前：
.datepicker {
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
修改后：
.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">添加子账号</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="subAccount-form" action="/secure/setting/account/add" method="post" novalidate="novalidate" data-widget-cid="widget-4">
<div class="row form-group">
<div class="col-md-3 control-label"><label for="name">Email</label></div>
<div class="col-md-8 controls">
<input class="form-control" type="text" id="email" value="" name="email" required="required" data-widget-cid="widget-5" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3 control-label"><label for="name">密码</label></div>
<div class="col-md-8 controls">
<input class="form-control" type="password" id="password" value="" name="password" required="required" data-widget-cid="widget-5" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3 control-label"><label for="name">用户名</label></div>
<div class="col-md-8 controls">
<input class="form-control" type="text" id="childusername" value="" name="childusername" required="required" data-widget-cid="widget-5" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3 control-label">
<label>类别</label>
</div>
<div class="col-md-8 controls">
<select class="form-control" id="userlevel" name="userlevel">
<option value="">请选择</option>
<option value="0">编辑员</option>
<option value="1">操作员</option>
<option value="2">管理员</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-3 control-label"><label>过期时间</label></div>
<div class="col-md-8 controls">
<div class="input-append date form_datetime">
<input class="form-control" size="16" type="text" id="expiredate" value="" name="expiredate" required="required" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="help-block" style="display:none;"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary" data-toggle="form-submit" data-target="#subAccount-form">确定</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<#-- 待加载的JS -->
<link rel="stylesheet" type="text/css" href="/assets/js/libs/datepicker/css/datepicker.css" />
<style>
.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
<script src="/assets/js/libs/datepicker/js/bootstrap-datepicker.js"></script>
<#-- 待加载的JS -->
<script>
$(function(){
$("#expiredate").datepicker();
jQuery.validator.setDefaults({
errorElement : 'p',
errorClass : 'help-block',
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement : function(error, element) {
element.parent('div').append(error);
}
});
$("#subAccount-form").validate({
ignore: [],
rules : {
expiredate : {
required : true
},
userlevel : {
required : true
},
password : {
required : true,
minlength : 6,
maxlength : 20
},
childusername : {
required : true,
maxlength : 60
},
email : {
required : true,
email : true,
remote : 'account/add/checkemail'
}
},
messages : {
expiredate : {
required : '请设置过期时间'
},
userlevel : {
required : '请选择用户类型'
},
password : {
required : '密码不能为空',
minlength : '密码的最小长度不能小于6个字符',
maxlength : '密码的最大长度不能超过20个字符'
},
childusername : {
required : '用户名不能为空',
maxlength : '用户名的最大长度不能超过60个字符'
},
email : {
required : 'Email不能为空',
remote : 'Email已存在,请重新输入'
}
},
submitHandler : function(form) {
//form.submit();
$.post($(form).attr('action'), $(form).serialize(), function(json) {
if(json.status == "success") {
Notify.success("<i class='glyphicon glyphicon-saved'></i> 子账号添加成功。", 3);
window.location.reload();
//$modal.modal('hide');
} else if(json.status == "fail") {
Notify.danger("fail", 3);
} else {
Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);
}
}, 'json');
return false;
}
});
});
</script>
另外一位网友提供的解决方案，如果上面的不好用，可以试试这个：
可以通过在 input 输入框之外 嵌套<span style="position: relative; z-index: 9999;">完美解决问题。
类似资料：