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

【问题标题】：Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6
【发布时间】：2017-02-09 07:06:41
【问题描述】：

我们正在使用Eonasdan 日期时间选择器。我们迁移到 Boostrap 4 Alpha 6，因为它比 Alpha5 有很多改进，但日期时间选择器坏了。现在，当我们单击日期时间选择器中的日历图标时，它没有显示数字。但它正在与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>

【问题讨论】：

Bootstrap Datepicker 尚不兼容 Bootstrap 4，并且如您所知，开发人员已经意识到这个问题：github.com/Eonasdan/bootstrap-datetimepicker/issues/1996

标签： bootstrap-datetimepicker bootstrap-4

【解决方案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

【讨论】：

我已应用您的更改，但仍然无法正常工作。该插件已正确初始化，没有错误。并且输入值被正确填充。但是当我打开选择器时，用户界面一团糟。我可以将鼠标悬停在内容区域上以找到用于设置时间值的按钮。但是日期选择器用户界面已经消失了。这变得乏味了，我一直在尝试为 bootstrap 4 找到一个日期时间选择器。我一直在迁移到 bootstrap 4 beta 并且一个日期时间选择器组件是必不可少的。任何帮助表示赞赏。

【解决方案2】：

为了正确显示 eonasdan-bootstrap-datetimepicker 中的所有图标，您可以使用此标签仅将字形图标添加到您的页面：

&lt;link rel='stylesheet' href='bower_components/glyphicons-only-bootstrap/css/bootstrap.min.css' /&gt;

或安装它：

// using npm
npm install glyphicons-only-bootstrap

// using bower
bower install glyphicons-only-bootstrap

这有助于您正确显示组件中的所有图标，正确显示组件请按照上述针对 Heretron 和 sr9yar 的步骤操作。

显然，您也可以从 boostrap 3 中的 dist 文件夹中复制字体以及相对于它的 css，但以前的选项通常更快。

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

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

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

PD：对不起，如果我的英语有误。再见

【讨论】：