JQuery `datepicker` 日历图标显示在`datepicker` 本身下方

Question

我正在尝试在我的 Web 应用程序中使用 JQuery Datepicker 项目。我用的是Bootstrap 3下面是我的相关代码

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png"  width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to Hospitalization list</b></font></span> </div>
      <div class="modal-body">
          <form class="form-horizontal" method="post" action=""  data-parsley-validate>
          <fieldset id="modal_form">


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Admission Date:</label>
              <div class="col-md-6">
                 <input name="admissionDate" type="text" class="form-control input-md date-picker" readonly required> 
              </div>

            </div>


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Length of stay</label>
              <div class="col-md-6">
                <input id="textinput" name="lengthOfStay" type="number"  class="form-control input-md" required> 
              </div>

            </div>


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Related To</label>
              <div class="col-md-6">
                  <input name="relatedTo" type="text" class="form-control input-md"> 
              </div>

            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Procedure</label>
              <div class="col-md-6">
                  <input name="procedure" type="text" class="form-control input-md"> 
              </div>

            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Status</label>
              <div class="col-md-6">
                  <select class="form-control input-md" name="status">

                    <option>Completed</option>
                    <option>Active</option>
                    <option>Aborted</option>
                    <option>Canceled</option>
                    <option>Scheduled</option>
                  </select>
              </div>

            </div>

             <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Comment</label>
              <div class="col-md-6">
                  <input name="comment" type="text" class="form-control input-md" required> 
              </div>

            </div>



      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="reset" class="btn btn-default">Clear</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
                </fieldset>
        </form>
</div>
    </div>
  </div>
</div> 

下面是我的 JQuery 代码

<script type="text/javascript">    
$(function() {
    $('.date-picker').datepicker( {

        yearRange: "-100:+45",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd',       
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });    

    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});


</script>

这会生成下面的 UI

如您所见，“日历”图标位于 datepicker 字段下方。我不是网页设计师，所以对我来说，将它放在datepicker 旁边的唯一方法似乎是从datepicker 的class 属性中删除form-control input-md 部分，这使得UI 有点难看。

我很确定应该有一种方法可以在不删除其样式的情况下获取 datepicker 旁边的日历图标，但我该怎么做呢？

Answer 1

使用引导程序的“.input-group”表单组件还有另一种方法。在CODEPEN查看工作示例

希望对你有帮助

HTML：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">Open Modal</button>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to Hospitalization list</b></font></span> </div>
      <div class="modal-body">
        <form class="form-horizontal" method="post" action="" data-parsley-validate>
          <fieldset id="modal_form">


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Admission Date:</label>
              <div class="col-md-6">
                <div class="input-group">
                  <input name="admissionDate" type="text" class="datepicker form-control" readonly required>
                  <span class="input-group-btn">
                                <button type="button" class="btn datepicker-open btn-default" ><span class="glyphicon glyphicon-calendar"></span>
                  </button>
                  </span>
                </div>

              </div>

            </div>


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Length of stay</label>
              <div class="col-md-6">
                <input id="textinput" name="lengthOfStay" type="number" class="form-control input-md" required>
              </div>

            </div>


            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Related To</label>
              <div class="col-md-6">
                <input name="relatedTo" type="text" class="form-control input-md">
              </div>

            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Procedure</label>
              <div class="col-md-6">
                <input name="procedure" type="text" class="form-control input-md">
              </div>

            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Status</label>
              <div class="col-md-6">
                <select class="form-control input-md" name="status">

                    <option>Completed</option>
                    <option>Active</option>
                    <option>Aborted</option>
                    <option>Canceled</option>
                    <option>Scheduled</option>
                  </select>
              </div>

            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Comment</label>
              <div class="col-md-6">
                <input name="comment" type="text" class="form-control input-md" required>
              </div>

            </div>


            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save</button>
              <button type="reset" class="btn btn-default">Clear</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

CSS：

.ui-datepicker {
  z-index:9999!important;
}

JS：

$('.datepicker').datepicker({
  yearRange: "-100:+45",
  changeMonth: true,
  changeYear: true,
  dateFormat: 'yy-mm-dd'

});

    $('.datepicker-open').click(function(event) {
      event.preventDefault();
      $('.datepicker').focus();
    });

    $.fn.modal.Constructor.prototype.enforceFocus = function() {};

享受:)