Question

我们正在使用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>

Answer 1

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

Source

Answer 2

为了正确显示eonasdan-bootstrap-datetimepicker中的所有图标，您只能使用此标记向您的页面添加glyphicons：

＆＃13;

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

＆＃13;

或安装：

// 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：对不起，如果我的英语错了。再见

Bootstrap日期时间选取器不与Bootstrap 4 Alpha 6一起使用

2 个答案: