Bootstrap-Datetime-Picker funktioniert nicht mit Bootstrap-4 Alpha 6

Sind wir mit Eonasdan Datetime-picker. Wir wanderten zu den Boostrap 4 Alpha 6 denn es kommt mit vielen Verbesserungen gegenüber Alpha5, sondern Datetime-picker gebrochen. Jetzt ist es nicht, der die zahlen zeigt, wenn wir klicken Sie auf Kalender-Symbol in der datetime-picker.Aber es funktioniert mit alpha 5.Ich bin auf der Suche nach einer Möglichkeit, diese zu lösen.

JS:

//Code goes here

$(function () {
  $('#datetimepicker1').datetimepicker();
});

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Bootstrap date time picker</title>
    <!--<link  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>

InformationsquelleAutor nivas | 2017-02-09
  1. 12

    Klassen collapse in Klassen wurden geändert in collapse show, das ist, warum der code wurde nicht vereinbar.

    in Ihrem vendor\eonasdan\bootstrap-datetimepicker\src\js\bootstrap-datetimepicker.js

    getTemplate:

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

    Änderung:

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

    togglePicker:

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

    und

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

    Änderung:

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

    und

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

    Quelle

    • Ich habe Ihre änderungen angewendet, aber es funktioniert immer noch nicht. das plugin ist richtig initialisiert, kein Fehler da. und der input-Wert wird ordnungsgemäß gefüllt. aber wenn ich öffnen Sie die picker, die UI ist Durcheinander. ich kann die Maus über dem content-Bereich finden Sie die Schaltflächen für die Einstellung der Zeit Wert. aber der datepicker UI ist das alles verschwunden. dies ist immer langweilig, ich habe versucht zu finden ein datetime-picker für bootstrap 4. ich habe die Migration auf bootstrap 4 beta und einen datetime-picker-Komponente unerlässlich ist. jede Hilfe ist willkommen.
    InformationsquelleAutor sr9yar
  2. 1

    Für korrekt angezeigt, alle Symbole in eonasdan-bootstrap-datetimepicker-Sie können nur die glyphicons auf Ihrer Seite mit diesem tag:

    HTML:

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

    oder installieren es mit:

    //using npm
npm install glyphicons-only-bootstrap

//using bower
bower install glyphicons-only-bootstrap

    Diese helfen Ihnen zu zeigen, richtig alle Symbole in der Komponente, für die richtige Komponente für die Anzeige befolgen Sie die oben genannten Schritte für Heretron und sr9yar.

    Natürlich können Sie auch kopieren Sie die fonts aus dem dist-Ordner im boostrap 3 und den css relative, aber der vorher option ist in der Regel mehr schnell.

    Dies ist das repository in github von glyphicon-nur-bootstrap:

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

    Glück, hoffe ich habe dir helfen

    PD: Sorry, wenn mein Deutsch falsch ist. Bye

    InformationsquelleAutor Diego Alberto Zapata Häntsch
Schreibe einen Kommentar