Блог

У меня есть UI-Bootstrap datepicker

  <div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

     <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
     <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
     </span>

</div>
  

Это css для поля ввода

 #datepicker{
    height: 50px;
    width: 60%;
}
  

Кнопка календаря отображается под полем ввода, а не рядом с ним, как если <br> бы к нему был применен символ. Я хочу, чтобы кнопка отображалась рядом с полем. Как я могу этого добиться?

Вы должны использовать группы ввода в соответствии с Bootstrap.

 <div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

    <div class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>
  

Я думаю, вы ищете горизонтальные формы.

 <form class="form-horizontal">
    <div class="form-group">
        <label for="datepicker">Select Date<span class="compulsary">*</span></label>
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
    </div>
</form>