начальная загрузка начального и среднего времени глифы не выровнены должным образом

Question

Я создаю Date Picker и Time picker в Bootstrap 4, используя bootstrap-datepicker.js и bootstrap-timepicker.js.Проблема в том, что календарь и значок времени не отображаются должным образом.Я хочу, чтобы они были внутри кнопки ввода, но она появляется внизу поля ввода.

<div class="col-md-3 columns">
    <label>Date:</label>
    <input data-date-format="dd/mm/yyyy" id="datepicker">  
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<div class="col-md-2 columns">
    <label>Time:</label>
    <input id="timepicker1" type="text" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>  

Это мои файлы CSS и Javascript.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
    integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
    src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
    integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
    integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>

Answer 1

Чтобы отобразить кнопки помимо поля ввода, вам нужно обернуть ввод и кнопку в класс .input-group, например:

<div class="col-md-2 columns">
  <div class="input-group">
    <label>Time:</label>
    <input id="timepicker1" type="text" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
  </div>

Значки отсутствуют, поскольку глифы были удалены из Bootstrap 4, так что вы 'Вам нужно будет загрузить их отдельно.