Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6

Question

我们正在使用 Eonasdan Datetime picker. We are migrated to Boostrap 4 Alpha 6 since it comes with lot of improvements over Alpha5 but Datetime picker broken. Now it's not showing the numbers when we click on calendar icon in datetime picker.But it's working with alpha 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>

Answer 1

类 collapse in 类被更改为 collapse show，这就是代码变得不兼容的原因。

在你的vendor\eonasdan\bootstrap-datetimepicker\src\js\bootstrap-datetimepicker.js

获取模板：

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));
  }

切换选择器：

   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');

Source

Answer 2

为了在 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 的步骤进行操作。

显然，您也可以从 boostrap 3 中的 dist 文件夹和与之相关的 css 复制字体，但以前的选项通常更快。

这是 github 中的 glyphicon-only-bootstrap 的存储库：

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

祝你好运，希望对你有所帮助

PD：抱歉，如果我的英语有误。再见

Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6

Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6

bootstrap-datetimepicker

bootstrap-4