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

我正在尝试在我的web应用程序中使用JQuery

Datepicker

项。我正在使用

bootstrap3

下面是我的相关代码

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

$（函数（）{
$（'.date picker'）。日期选择器（{
年范围：“-100:+45”，
变化月：对，
变化年：是的，
日期格式：'年-月-日'，
展示：“按钮”，
buttonImage:“images/calendar.gif”，
buttonImageOnly:正确，
按钮文字：“选择日期”
});    
$.fn.modal.Constructor.prototype.enforceFocus=function（）{}；
});

这将生成以下UI

如您所见，“日历”图标位于

datepicker

字段下方。我不是网页设计师，所以对我来说，将其放在

日期选择器

旁边的唯一方法似乎是从

日期选择器

的

类

属性中删除

表单控件输入md

部分，这使得UI有点难看

---

我很确定应该有一种方法可以在不删除日历图标样式的情况下获取

日期选择器旁边的日历图标，但是我如何才能做到这一点呢？
还有另一种方法可以使用引导的“.input group”表单组件来实现这一点。请检查以下位置的工作示例：

我希望它能对你有所帮助

HTML:

JS:

享受：）
使用引导的“.input group”表单组件还有另一种方法。请检查以下位置的工作示例：

我希望它能对你有所帮助

HTML:

JS:

享受：）
谢谢，我会试试这个，然后回复你。谢谢，我会试试这个，然后回复你。
<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>

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

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