Question

我有一个日期选择器，我希望datepicker图标出现在datepicker之后。但是，datepicker图标显示在datepicker下方。我附上了一个JSFiddle。 Fiddle for 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按钮与文本框对齐但失败了。我必须将datepicker按钮与文本框对齐。

它完全适用于JSFiddle。但是，如果您在Chrome上运行它。您会注意到datepicker按钮出现在文本框下方。如何将其与文本框对齐？

Answer 1

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

＆＃13;

$(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
        });
      });

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

只需在CSS下面更改

.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%;
}

Answer 3

将此添加到样式中可以完成这项工作..

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

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

3 个答案: