ブートストラップ日時ピッカーがブートストラップ4アルファで動作しない6

Eonasdan日時ピッカー。我々はBoostrap 4 Alpha 6に移行されています.Alpha5よりも多くの改良点がありますが、Datetime pickerは壊れています。今度は、datetime pickerのカレンダーアイコンをクリックすると数字が表示されません。しかし、それはalpha 5で動作しています。これを解決する方法を探しています。ブートストラップ日時ピッカーがブートストラップ4アルファで動作しない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/bootstrap-datetimepicker/issues/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が台無しです。私は時間の値を設定するためのボタンを見つけるためにコンテンツ領域の上にマウスを置くことができます。 datepickerのUIはすべて消えています。これは退屈になっています。ブートストラップ4用のdatetimeピッカーを見つけようとしていました。ブートストラップ4ベータに移行していました。日時ピッカーコンポーネントは必須です。どんな助けもありがとう。 – Nexus

だけ追加することができますeonasdan-ブートストラップのDateTimePickerですべてのアイコンあなたのページにglyphiconsを使って彼のタグ：

<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

このヘルプを、正しくコンポーネントを表示するためには、のために、上記の手順に従ってくださいヘトロンとsr9yar。

明らかに、あなたはまた、ブーストラップ3のdistフォルダからフォントをコピーすることもできますが、それに関連してCSSをコピーすることもできますが、以前のオプションは一般的に高速です。

これはglyphicon専用のブートストラップのgithubのでリポジトリです：私の英語が間違っている場合は申し訳ありません：

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

幸運、私はあなたが

PDの助けを持っている願っています。 Bye

出典

2017-12-18 22:38:15

ブートストラップ日時ピッカーがブートストラップ4アルファで動作しない6

答えて

関連する問題