Datepicker图标与文本框未正确对齐

Question

我有两个带有日期选择器的文本框，当前我正在使用按钮图标来选择日期。我的问题是该按钮直接出现在文本框下方，而我希望它直接与文本框的右侧对齐。我相信我需要研究CSS才能取得结果。

$('body', window.parent.document).loader('hide');
window.parent.$.body.loader('hide');

$('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        showOn:"button",
        buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
       
    });
    
    $('#datepicker2').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        showOn:"button",
        buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
       
    });

Answer 1

使用position:absolute;

应用此CSS

$('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        showOn:"button",
        buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
       
    });
    
    $('#datepicker2').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        showOn:"button",
        buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
       
    });

.form-group{
   position:relative;}
   
.ui-datepicker-trigger{
    right: 16px;
    top: 26px;
    position: absolute;}
    
.ui-datepicker-trigger span{
    line-height:26px;}
    
.form-control{
    padding-right:30px!important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />


<div class="form-group row">
   <div style="float:left;" class="form-group col-xs-6">
                <label>Date 1</label>
                <input type="text" class="form-control" id="datepicker1"/>
              
    </div>
    <div style="float:left" class="form-group col-xs-6">
                <label>Date 2</label>
                <input type="text" class="form-control" id="datepicker2"/>
                </div>
                </div>