如何正确对齐datepicker文本框下方的datepicker图标？

我有一个日期选择器，我希望datepicker图标出现在日期选择器后面。但是，日期选择器图标出现在日期选择器下方。我附加了一个JSFiddle。 Fiddle for datepicker 如何正确对齐datepicker文本框下方的datepicker图标？

 $(document).ready(function() { 
 
     $("#datepicker").datepicker({ 
 
      changeMonth: true, 
 
      changeYear: true, 
 
      yearRange: "-100:+0", 
 
      showOn: 'button', 
 
      buttonText: 'Show Date', 
 
      buttonImageOnly: true, 
 
      buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif', 
 
      dateFormat: 'dd/mm/yy', 
 
      maxDate: 0 
 
     }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<body> 
 
    <form> 
 
    <div class="row"> 
 
     <div class="form-group col-md-1"> 
 
     <label>DOB :</label> 
 
     </div> 
 
     <div class="form-group col-md-3"> 
 
     <input class="form-control" name="dob" value="" id="datepicker" type="text"> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

我试图获得在很多方面对齐文本的日期选择器按钮，但失败了。我必须让datepicker按钮对齐到文本框。

它在JSFiddle上完美工作。但是，如果你在Chrome上运行它。您会注意到日期选择器按钮出现在文本框下方。如何将其与文本框对齐？下面CSS

来源

2016-01-21 Nevermore

display：inline-block; vertical-align：middle; 宽度：90％; margin：0 5px 0 0; 通过回答Shailesh works – Nevermore

添加这风格做的工作..

display: inline-block; 
vertical-align: middle; 
width: 90%; 
margin: 0 5px 0 0;

来源

2016-01-21 08:58:09 Nevermore

只是改变

.form-control { 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
    color: #555; 
    display: inline; 
    font-size: 14px; 
    height: 34px; 
    line-height: 1.42857; 
    margin-right: 10px; 
    padding: 6px 12px; 
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; 
    width: 90%; 
}

来源

2016-01-21 07:57:30

你不觉得它会影响我所有的表单控件吗？ .. 我宁愿在上面的评论中提出答案。 – Nevermore

input.hasDatepicker { 
    display: inline-block; 
    margin-right: 5px; 
    width: -webkit-calc(100% - 21px); 
    width: -moz-calc(100% - 21px); 
    width: -o-calc(100% - 21px); 
    width: -ms-calc(100% - 21px); 
    width: calc(100% - 21px); 
}

添加上述CSS

$(document).ready(function() { 
 
     $("#datepicker").datepicker({ 
 
      changeMonth: true, 
 
      changeYear: true, 
 
      yearRange: "-100:+0", 
 
      showOn: 'button', 
 
      buttonText: 'Show Date', 
 
      buttonImageOnly: true, 
 
      buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif', 
 
      dateFormat: 'dd/mm/yy', 
 
      maxDate: 0 
 
     }); 
 
     });

input.hasDatepicker { 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    width: -webkit-calc(100% - 21px); 
 
    width: -moz-calc(100% - 21px); 
 
    width: -o-calc(100% - 21px); 
 
    width: -ms-calc(100% - 21px); 
 
    width: calc(100% - 21px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<body> 
 
    <form> 
 
    <div class="row"> 
 
     <div class="form-group col-md-1"> 
 
     <label>DOB :</label> 
 
     </div> 
 
     <div class="form-group col-md-3"> 
 
     <input class="form-control" name="dob" value="" id="datepicker" type="text"> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

来源

2016-01-21 08:31:38

如何正确对齐datepicker文本框下方的datepicker图标？

回答

相关问题