webentwicklung-frage-antwort-db.com.de

bootstrap-Datentimepicker-Stile werden nicht korrekt angewendet

Ich habe Probleme, diesen Bootstrap-Datentimepicker zum Laufen zu bringen:

http://eonasdan.github.io/bootstrap-datetimepicker/

Ich habe eine sehr einfache Seite gemacht, hier ist der Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $('#datetimepicker1').datetimepicker();
});
</script>
</head>

<body>
<div class='col-sm-2'>
    <div class='input-group' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

</body>
</html>

Nun, es ist nicht so, dass das Plugin nicht funktioniert, es ist eher so, dass einige Stile nicht korrekt angewendet werden. Hier ist ein Bild, um besser zu veranschaulichen, was ich meine. Auf der linken Seite ist was ich habe und auf der rechten Seite was ich eigentlich will:

datepicker comparison

Wie Sie sehen, ist alles nach links ausgerichtet und nicht zentriert und die Dinge sind enger. Es gibt auch keinen Hover-Effekt, wenn ich mit der Maus über den Kalender fahre und der aktuelle Tag nicht richtig dargestellt wird. Kann mir jemand sagen, was ich falsch mache?

16
Osuwariboy

In Ihrem Screenshot sieht es so aus, als würden Sie die Bibliothek bootstrap-datetimepicker.css nicht ziehen. Schauen Sie sich Ihre Konsole an und stellen Sie sicher, dass Sie keine Fehler haben und sich die Bibliothek in dem Ordner befindet, nach dem sie sucht, und über den entsprechenden Inhalt verfügt.

Ohne das zusätzliche CSS sieht es nicht furchtbar aus, da Bootstrap die meiste Last auf sich zieht und Plugins normalerweise nur die Vorteile von Bootstraps Klassen nutzen und ein paar eigene hinzufügen, um alles in den Griff zu bekommen.

demo

With Library - Arbeiten

$(function() {
  $('#datetimepicker1').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
  <div class='input-group' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Ohne Bibliothek - Defekt

$(function() {
  $('#datetimepicker1').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
  <div class='input-group' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

P.S. - Es ist schwer zu debuggen, da wir nicht wissen, wie die Dateien in Ihrem lokalen /js/-Ordner aussehen. In Zukunft würde ich vorschlagen, CDNs für Online-Samples zu verwenden, damit Sie das, was Sie sehen, einfacher mit anderen teilen können. Sie können verteilbare statische Dateien mit cdnjs hier abrufen:

24
KyleMit

Danke Kyle, du hattest Recht, ich habe die CSS-Styles nicht mitgezogen. Obwohl es nicht so ist, weil ich es nicht eingeschlossen habe ... es war eher ein Fehler in meiner Include-Aussage. Das hatte ich:

<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

Ich habe versehentlich 'src' anstelle von 'href' gesetzt, also habe ich folgendes gesetzt:

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

Danke, dass du mich in die richtige Richtung zeigst :)

10
Osuwariboy

Ich hatte das gleiche Symptom, weil derselbe Stil nicht geladen wurde. In meinem Fall ist meine App eine Rails 5-Anwendung, und in meiner application.css-Datei hatte ich

*= require_bootstrap-datetimepicker

anstatt 

*= require bootstrap-datetimepicker

Diese Korrektur korrigierte mich.

1
Dana Jones