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;">完美解决问题。