日期选择器图标未与文本框正确对齐

Question

我有两个带有日期选择器的文本框，目前我正在使用按钮图标来选择日期。我的问题是按钮直接出现在文本框下方，而我希望它直接对齐到文本框的右侧。我相信我需要努力 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>"
       
    });

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

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>

日期选择器图标未与文本框正确对齐

Datepicker icon not aligned properly with textbox

html

javascript

css

jquery-ui-datepicker

twitter-bootstrap