web-dev-qa-db-de.com

Twitter Bootstrap-Datumsauswahl

Wie kann ich die Datumsauswahl von Twitter Bootstrap verwenden? Ich habe den folgenden Code verwendet, aber er funktioniert nicht.

<html>
    <head>
    <title>DatePicker Demo</title>
    <script src="js/jquery-1.7.1.js"></script>
    <link href="css/datepicker.less" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/bootstrap-datepicker.js"></script>

    </script>
    </head>
    <body>
    <form >
        <div class="input">
            <input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
        </div>
    </form>

    </body>
</html>
54
Sangram Anand

Twitter Bootstrap ist im Moment nicht mit jQuery-UI-Styles kompatibel.

https://github.com/Twitter/bootstrap/issues/156

Dies könnte Ihnen helfen https://github.com/sferik/Rails_admin ( http://Rails-admin-tb.herokuapp.com/admin/drafts/new )

16
Michael

Die beliebteste Datumsauswahl für das Bootstrap ist derzeit: https://github.com/eternicode/bootstrap-datepicker (Dank an @dentarg für das Auffinden)

Eine einfache Instantiierung erfordert nur:

HTML

<input class="datepicker">

Javascript

$('.datepicker').datepicker();

Ein einfaches Beispiel finden Sie hier https://jsfiddle.net/k6qsm5no/1/ oder die vollständigen Dokumente hier http://bootstrap-datepicker.readthedocs.org/de/latest/

68
Josh Stuart

Die Existenz von mindestens drei Hauptbibliotheken mit dem Namen bootstrap-datepicker sorgt für große Verwirrung:

  1. Eine beliebte Gabel von eyecons Datepicker von Andrew 'eternicode' Rowls (benutze diese!) :
  2. Die Originalversion von Stefan 'eyecon' Petre, noch verfügbar unter http://www.eyecon.ro/bootstrap-datepicker/
  3. Ein völlig unabhängiges Datepicker-Widget, das 'storborg' wollte in bootstrap zusammengeführt werden . Es wurde nicht zusammengeführt und es wurde nie eine richtige Release-Version des Widgets erstellt.

Wenn Sie ein neues Projekt starten - oder zum Teufel, auch wenn Sie ein altes Projekt mit der eyecon-Version übernehmen -, empfehle ich, dass Sie die Version von eternicode verwenden , nicht eyecons . Die ursprüngliche eyecon-Version ist sowohl in Bezug auf die Funktionalität als auch in Bezug auf die Dokumentation völlig unterlegen, und dies wird sich wahrscheinlich nicht ändern - sie wurde seit März 2013 nicht aktualisiert.

Sie können die meisten Funktionen des eternicode-Datepickers auf der Demoseite sehen, wodurch Sie mit der Konfiguration des Datepickers spielen und die Ergebnisse beobachten können. Weitere Informationen finden Sie in der prägnanten, aber umfassenden Dokumentation , die Sie wahrscheinlich in weniger als einer Stunde vollständig konsumieren können.

Für den Fall, dass Sie ungeduldig sind, finden Sie hier eine kurze, schrittweise Anleitung zum einfachsten und gebräuchlichsten Anwendungsfall für den Datepicker.

Schnellstartanleitung

  1. Fügen Sie die folgenden Bibliotheken (Mindestversionen hier ) zu Ihrer Seite hinzu:
  2. Platzieren Sie ein input -Element auf Ihrer Seite, z.

    <input id="my-date-input">
    
  3. Wählen Sie mit jQuery Ihre Eingabe aus und rufen Sie die Methode .datepicker() auf:

    jQuery('#my-date-input').datepicker();
    
  4. Laden Sie Ihre Seite und klicken Sie auf oder auf die Registerkarte in Ihrem input -Element. Ein Datepicker erscheint:

    Picture of a datepicker

30
Mark Amery

Schauen Sie sich Jquery Bootstrap an:

http://jslegers.github.com/jquery-bootstrap/

1
Andrew

hinzufügen 

z-index:1151;

zum Stylesheet in 

.datepicker
1
Sujay sreedhar

Ich hatte das gleiche Problem, aber als ich ein Testprojekt erstellte, funktionierte datepicker zu meiner Überraschung perfekt mit Bootstrap v2.0.2 und Jquery UI 1.8.11. Hier sind die Skripte, die ich beinhaltet:

        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
1
Andrew

Erstellen Sie ein benutzerdefiniertes Design mit dem Roller, und wählen Sie auf der Download-Seite "Erweiterte Designeinstellungen". Setzt den CSS-Bereich auf 'body'. Da den CSS-Regeln, die Sie herunterladen, der Body-Tag-Selektor vorangestellt wird, haben sie eine höhere Spezifität und werden Bootstrap-Regeln überschreiben.

0
Shehab Fawzy

Einige Leute haben link in diese bootstrap-datepicker.js-Implementierung eingestellt. Ich habe das auf folgende Weise verwendet, es funktioniert mit Bootstrap 3.

Dies ist das Markup, das ich verwendet habe:

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">                        
    <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
    <span class="input-group-addon add-on">
        <span class="glyphicon glyphicon-calendar"</span>
    </span>
</div>

Dies ist das Javascript:

$('.date').datepicker();

Ich habe auch die vom obigen Link heruntergeladene Javascript-Datei mitsamt der zugehörigen CSS-Datei hinzugefügt. Natürlich sollten Sie alle Bootstrap-Grid-Klassen wie col-md-3 entfernen, um Ihre Anforderungen zu erfüllen.

0
Cloud9999Strife

Sie haben data-datepicker="datepicker" verwendet. Es muss date-provide="datepicker" sein.

Außerdem haben Sie 2 Bootstrap-Stylesheets bootstrap.css und bootstrap.min.css hinzugefügt.

Ich bevorzuge auch bootstrap-datepicker3.min.css als datepicker.less

Full Html:

<html>
    <head>
    <title>DatePicker Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <form>
            <div class="input">
                <input data-provide="datepicker" class="small" type="text" value="01/05/2011">
            </div>
        </form>
    </body>
</html>
0
Quan Do

Ich hatte auch das gleiche Problem für Twitter-Bootstrap.

Da eternicode/bootstrap-datepicker nicht mit der jQuery-Benutzeroberfläche kompatibel ist.

Twitter-Bootstrap funktioniert jedoch auch mit vitalets/bootstrap-datepicker sogar mit der jQuery-Benutzeroberfläche.

0
Tanmay