Значок Datepicker не выровнен должным образом с текстовым полем - PullRequest
Новая
       13

Значок Datepicker не выровнен должным образом с текстовым полем

0 голосов
/ 29 ноября 2018

У меня есть два текстовых поля с указателем даты, в настоящее время я использую значок кнопки для выбора даты.Моя проблема в том, что кнопка появляется прямо под текстовым полем, в то время как я хотел бы, чтобы она выровнялась прямо с правой стороны текстового поля.Я считаю, что мне нужно будет работать над 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>

1 Ответ

0 голосов
/ 29 ноября 2018

применить этот CSS, используя position:absolute;

$('#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>
...