web-dev-qa-db-fra.com

Bootstrap Datetime Picker ne fonctionne pas avec Bootstrap 4 Alpha 6

Nous utilisons le sélecteur Eonasdan Datetime. Nous avons migré vers Boostrap 4 Alpha 6 car il apporte de nombreuses améliorations par rapport à Alpha5, mais le sélecteur de date/heure est cassé. Maintenant, les chiffres ne s'affichent pas lorsque nous cliquons sur l'icône du calendrier dans le sélecteur de date/heure. Mais cela fonctionne avec 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

Les classes collapse in ont été changées en collapse show, c’est pourquoi le code est devenu incompatible.

dans votre vendeur\eonasdan\bootstrap-datetimepicker\src\js\bootstrap-datetimepicker.js

getTemplate:

if (hasDate()) {
 content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse in' : '')).append(dateView));

Changer en:

if (hasDate()) {
  content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse show' : '')).append(dateView));
  }

togglePicker:

   expanded = $parent.find('.in'),
  closed = $parent.find('.collapse:not(.in)'),

et

   } else { // otherwise just toggle in class on the two views
     expanded.removeClass('in');
     closed.addClass('in');

Changer en:

 expanded = $parent.find('.show'),
 closed = $parent.find('.collapse:not(.show)'),

et

  } else { // otherwise just toggle in class on the two views
  expanded.removeClass('show');
 closed.addClass('show');

La source

11
sr9yar

Pour afficher correctement toutes les icônes de eonasdan-bootstrap-datetimepicker, vous pouvez ajouter uniquement les glyphicons à votre page à l'aide de cette balise:

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

ou l'installer avec:

// using npm
npm install glyphicons-only-bootstrap

// using bower
bower install glyphicons-only-bootstrap

Cela vous aidera à afficher correctement toutes les icônes du composant. Pour afficher correctement le composant, suivez les étapes mentionnées ci-dessus pour Heretron et sr9yar.

Bien entendu, vous pouvez également copier les polices du dossier dist dans boostrap 3 et les css correspondants, mais l’option précédente est généralement plus rapide.

C’est le dépôt dans github de glyphicon-only-bootstrap:

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

Bonne chance, j'espère vous avoir aidé

PD: Désolé si mon anglais est faux. Au revoir

1
Diego Alberto Zapata Häntsch