web-dev-qa-db-ja.com

Bootstrap日時ピッカーが機能しないBootstrap 4 Alpha 6

Eonasdan 日時ピッカーを使用しています。 Alpha5に比べて多くの改善が加えられているが、日時ピッカーが壊れているため、Boostrap 4 Alpha6に移行しました。日時ピッカーのカレンダーアイコンをクリックしても数字が表示されなくなりましたが、 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-datetimepickerbootstrap-4
6
nivas

クラスcollapse inクラスがcollapse showに変更されたため、コードに互換性がなくなりました。

vendor\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));
  }

トグルピッカー：

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

ソース

13
sr9yar

Eonasdan-bootstrap-datetimepickerのすべてのアイコンを正しく表示するには、次のタグを使用してページにグリフィコンのみを追加できます。

<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について上記の手順に従います。

もちろん、ブーストラップ3のdistフォルダーとそれに関連するcssからフォントをコピーすることもできますが、以前のオプションの方が一般的に高速です。

これは、glyphicon-only-bootstrapのgithubにあるリポジトリです。

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

頑張ってください、私はあなたを助けてくれることを願っています

PD：私の英語が間違っていたらごめんなさい。さようなら

1
Diego Alberto Zapata Häntsch