Bootstrap Datetime Picker не работает с Bootstrap 4 Alpha 6

мы используем Eonasdan выбор даты и времени. Мы перенесены на Boostrap 4 Alpha 6, так как он поставляется с большим количеством улучшений по сравнению с Alpha5, но datetime picker сломан. Теперь он не показывает номера, когда мы нажимаем на значок календаря в datetime picker.Но он работает с Альфа-5.Я ищу возможный способ решить эту проблему.

// Code goes here

$(function () {
  $('#datetimepicker1').datetimepicker();
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Bootstrap date time picker</title>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    
    <div class="container" style="margin:50px;">
      <h4>Bootstrap Datetime Picker</h4>
      <div class="row">
          <div class='col-sm-6'>
              <div class="form-group">
                  <div class='input-group date' id='datetimepicker1'>
                      <input type='text' class="form-control" />
                      <span class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                      </span>
                  </div>
              </div>
          </div>
      </div>
    </div>
         
    
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
    <script src="script.js"></script>

</html>
6
bootstrap-4 bootstrap-datetimepicker

2 ответов

классы collapse in классы были изменены на collapse show, вот почему код стал несовместимы.

в своем поставщик\eonasdan\bootstrap-datetimepicker\src\js\bootstrap-datetimepicker.js

getTemplate:

if (hasDate()) {
 content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse in' : '')).append(dateView));

заменить на:

if (hasDate()) {
  content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse show' : '')).append(dateView));
  }

togglePicker:

   expanded = $parent.find('.in'),
  closed = $parent.find('.collapse:not(.in)'),

и

   } else { // otherwise just toggle in class on the two views
     expanded.removeClass('in');
     closed.addClass('in');

заменить на:

 expanded = $parent.find('.show'),
 closed = $parent.find('.collapse:not(.show)'),

и

  } else { // otherwise just toggle in class on the two views
  expanded.removeClass('show');
 closed.addClass('show');

источник

9

для корректного отображения всех значков в eonasdan-bootstrap-datetimepicker вы можете добавить только глификоны на свою страницу, используя этот тег:

<link rel='stylesheet' href='bower_components/glyphicons-only-bootstrap/css/bootstrap.min.css' />

или установите его с:

// using npm
npm install glyphicons-only-bootstrap

// using bower
bower install glyphicons-only-bootstrap

это поможет вам правильно отобразить все значки в компоненте, для корректного отображения компонента выполните описанные выше шаги для Heretron и sr9yar.

очевидно, вы также можете скопировать шрифты из папки dist в boostrap 3 и относительном css к нему, но предыдущий вариант, как правило, более быстрый.

это репозиторий в github из glyphicon-only-bootstrap:

https://github.com/ohpyupi/glyphicons-only-bootstrap

удачи, надеюсь, вам помогут

PD: Извините, если мой английский не так. Пока!--3-->

1