Warum mein Bootstrap-Datepicker nicht Symbol-Kalender haben?

Ich versuche bootstrap-datepicker zu verwenden.Warum mein Bootstrap-Datepicker nicht Symbol-Kalender haben?

Ich habe die datepicker.css und bootstrap-datepicker.js wie folgt enthalten:

<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/datepicker.css"> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-datepicker.js"></script>

Da ist in meinem div, ich so tat:

<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy"> 
    <input class="span2" size="16" type="text" value="15-07-2013" readonly> 
    <label class="add-on"><i class="icon-calendar"></i></label> 
</div>

Dann endlich, ich so tat:

<script> 

    $(function(){ 

     $('#dp2').datepicker(); 

     }); 
</script>

Ich kann die Datumsauswahl sehen, aber ohne das Symbol.

enter image description here

Ich möchte wie haben:

enter image description here

Was ich falsch gemacht?

bearbeiten

Mein vollständige Code:

<!doctype html> 
<html> 
    <head> 
    <title>Date</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
    <link rel="stylesheet" href="themes/readable/bootstrap.css"> 
    <link rel="stylesheet" href="css/datepicker.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/bootstrap-datepicker.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="well"> 
     <h4>Date Picker</h4> 
    <div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy"> 
     <input class="span2" size="16" type="text" value="15-07-2013"> 
     <label class="add-on"><i class="icon-calendar"></i></label> 
    </div> 
     </div> 
    </div> 
    <script> 

     $(function(){ 

     $('#dp1').datepicker(); 
     $('#dp2').datepicker(); 

     }); 
    </script> 
    </body> 
</html>

Quelle

2013-07-15 Jackson Tale

Haben Sie die Glyphicons im richtigen IMG-Ordner? – glosrob

@glosrob ehh ... ich denke nicht –

@glosrob Ich habe https://github.com/twitter/bootstrap/tree/master/img zu meinem Ordner hinzugefügt, immer noch kein icon-calendar –

ich this JSFiddle zusammen gesetzt haben, die folgende HTML arbeitet mit:

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

Und JS:

$(document).ready(function() { 
    $('#dp3').datepicker(); 
});

dem Unterschied, dass id="dp3" zum input Tag angewendet wird, und die enthält div nicht. Allerdings scheint es, dass in Ihrem Fall ist es im Zusammenhang mit wie und wo Sie Referenzierung Ihre enthält.

Die obige JSfiddle verweist direkt auf die Basisdateien (sowohl von CDN- als auch von Author-Sites). Es hängt also wahrscheinlich damit zusammen, wie Sie auf den relativen oder absoluten Speicherort der glyphicons/js/css-Dateien verweisen.

Ohne einen direkten Link zu Ihrer Implementierung oder vollständigen Code, ist es schwer, das Problem weiter, als dies zu diagnostizieren.

Quelle

2013-07-16 01:56:11 nickhar

Hallo, ich habe deinen JSFiddle-Link ausprobiert, aber ich kann das Kalendersymbol nicht sehen. http://oi42.tinypic.com/2h39csi.jpg –

Bitte beachten Sie meinen vollständigen Code in meinem Bearbeiten –

Geige funktioniert nicht in Chrome, Firefox oder IE. –

Es funktioniert für mich durch diese mit:

<div class="input-append date" id="theDate" data-date-format="dd-mm-yyyy"> 
    <form:input path="theDate" class="span2" size="130" readonly="true"/> 
    <span class="add-on"><i class="icon-th"><img src="${pageContext.request.contextPath}/....../datepicker.png"/></i></span> 
</div>

Hope this .... helfen :)

Quelle

2013-09-24 09:54:59 sunday03

Bitte fügen Sie ein Beispiel hinzu, wie es getan werden kann, um Ihre Antwort zu verbessern. – Szymon

Hallo Szymon, das ist ein Beispiel:

\t \t \t

– sunday03

Wegen Markup Änderungen für Bootstrap v2 und v3 Bootstrap. Die Sandbox Demo hat mir geholfen, das richtige Markup zu finden: http://eternicode.github.io/bootstrap-datepicker/

<div class="input-append date"> 
<input type="text" class="span2"> 
    /* this next line should help you */ 
    <span class="add-on"><i class="icon-th"></i></span> 
</div> 

$('.input-append.date').datepicker({ 
    format: "mm/yyyy" 
});

Quelle

2014-02-03 23:25:51

ich die gleiche Erfahrung, um den „Icon-Kalender“ können Sie hatte so habe ich nur die Bootstrap glyphicon, die mit dem Bootstrap-lib kommt und es funktionierte wie ein Zauber:

<div class="well"> 
    <div class="input-append date" id="dp3" 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"><span class="glyphicon glyphicon-calendar"></span> 
    </div> 
</div>

Quelle

2014-10-02 14:27:15

Sie haben eine redundante '' Tag: '' schließt nicht – Mateng

HTML:

<label>Date</label> 
<div class="input-append"> 
    <input class="my-date-picker" id="foo" type="text" /> 
    <label for="foo" class="add-on"><i class="icon-calendar"></i></label> 
</div>

Und eine Zeile JavaScript Ihre Arbeit abzuschließen ...

$(".my-date-picker").datepicker();

Quelle

2015-06-05 09:09:58

Warum mein Bootstrap-Datepicker nicht Symbol-Kalender haben?

Antwort

Verwandte Themen