Twitter ' s Bootstrap-Datepicker fehlt Glyphicons

Ich versuche, datepicker von bootstrap (http://eternicode.github.io/bootstrap-datepicker/) und alles funktioniert einwandfrei außer keiner von den glyphicons zeigen.

Sah ich, dass glyphicons sind in ein anderes Verzeichnis verschoben unter bootstrap 3 (http://glyphicons.getbootstrap.com/) das ist, was ich verwende, aber ich war mir nicht sicher, wie ich die integrieren kann.

Beide

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

Und

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

Nicht funktioniert hat.

Weiß jemand wie ich die einbinden kann, bootstrap 3 mit der twitter-datepicker?

Zeigen Sie Ihren code. In bootstrap 3 <span class="glyphicon glyphicon-refresh"></span> im bootstrap 2 <i class="icon-refresh"></i>

InformationsquelleAutor Penguinator | 2013-08-08

  1. 5

    Laden Sie die plugin-Quellcode, Javascript und CSS (oder weniger) und ersetzen Sie alte Referenzen auf neu, siehe: http://www.bootply.com/bootstrap-3-migration-guide.
    B. e. wie bereits erwähnt, durch PilHA ersetzen icon-* mit glyphicon glyphicon-*, input-append mit input-group etc.

    Tun das gleiche für Ihre HTML-code. Oder verwenden Sie einen migrator/updater wie: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ oder http://code.divshot.com/bootstrap3_upgrader/

    Installieren Glyphicons aus http://glyphicons.getbootstrap.com/: laden Sie die Dateien und kopieren Sie alle font-Dateien auf ein /fonts Verzeichnis der Nähe von CSS. Gehören die kompilierte CSS-Datei aus dem /css-Code in das repository auf Ihrem lokalen css-Ordner oder laden Sie die Weniger-Datei und kompilieren Sie es mit der Bootstrap-Dateien.

    update Glyphicons sind wieder da RC2. Twitter Bootstrap 3 enthält 180 Glyphen im font-format von der Glyphicon Halblinge setzen.

    danke für Eure Hilfe!

    InformationsquelleAutor Bass Jobsen

  2. 3

    Neben der änderung der Klasse Verweise ich herausgefunden, dass es einige überlegungen zum layout erlauben und eine eins-zu-eins-austauschen von bestimmten Klassen, wie span2 auf der input-Steuerung. Ich landete mit dem folgenden:

    <div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

    CSS-änderungen in datepicker.css auf Zeilen 176-177:

    .input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

    Javascript ändern in datepicker-bootstrap.js in Zeile 34:

    this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

    Ich schrieb auch einen blog-post geht in mehr detail hier: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

    Vielen Dank, der blog-post viel geholfen, denn es war nicht klar, dass man benötigt, um Anruf-datepicker auf $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });!

    InformationsquelleAutor Shane

  3. 1

    download bootstrap3 von hier aus Download

    Nun entpacken Sie es und Holen Sie die schriftart aus dem font-Ordner .

    Kopieren Sie diese .ttf , .otf ,.svg und andere Datei und fügen Sie @ Ihre Projekt-root

    Und Sie können download glyphoicon.css von hier glypho.css

    gehören diese css-Datei in der index-Datei

    Thats getan

    InformationsquelleAutor Nishchit Dhanani

  4. 0

    War ich nicht in der Lage zu ändern, meine glyphicons zunächst und in die F12 dev tools, die ich sehen konnte ein Fehler beim Versuch zu laden "glyphicons-Halblinge-regelmäßig.woff2". Ich war in der Lage, es zu beheben durch das herunterladen der .woff2-Datei und das hinzufügen es zu meinem fonts-Ordner. Dann war ich in der Lage zu ändern, was ich wollte.
    https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

    InformationsquelleAutor Caverman

Schreibe einen Kommentar