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

回答

相關問題