Bootstrap日期时间选取器不能与Bootstrap 4 Alpha 6

我们正在使用Eonasdan日期时间选择器。我们被迁移到Boostrap 4 Alpha 6，因为它具有比Alpha5更多的改进功能，但是日期时间选择器被破坏。现在，当我们点击日期时间选择器中的日历图标时，它不显示数字，但它与alpha 5一起工作。我正在寻找一种可能的方法来解决此问题。Bootstrap日期时间选取器不能与Bootstrap 4 Alpha 6

// 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>

来源

2017-02-09 nivas

Bootstrap Datepicker尚未与Bootstrap 4兼容，并且*如您所知，开发人员已经意识到此问题*：http：// github。COM/Eonasdan /自举的DateTimePicker /问题/ 1996 – ZimSystem

类collapse in类分别更改为collapse show，这就是为什么代码变得不兼容。

在 供应商

\ eonasdan \自举的DateTimePicker的\ src \ JS \引导-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

来源

2017-03-06 15:51:40 sr9yar

我申请更改，但它仍然无法正常工作。该插件已正确初始化，没有错误。并且输入值被正确填充。但是当我打开选取器时，UI会混乱。我可以将鼠标悬停在内容区域上以查找设置时间值的按钮。但日期选择器用户界面全部没了。这是不胜其烦，我一直都试图找到引导4.香港专业教育学院日期时间选择器被迁移到引导4 beta和一个日期选取器组件是必不可少的。任何帮助表示赞赏。 – Nexus

对于正确显示在eonasdan自举-的DateTimePicker所有图标，你可以只添加glyphicons到你的页面使用t他的标签：

<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。

显然你也可以从boost文件夹中的distrap文件夹中拷贝字体和相对于它的css，但以前的选项通常更快。

这是glyphicon只-引导的GitHub上的仓库：

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

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

PD：对不起，如果我的英语是错误的。 Bye

来源

2017-12-18 22:38:15

Bootstrap日期时间选取器不能与Bootstrap 4 Alpha 6

回答

相关问题