Bootstrap Glyphicons Datetime ändern Symbole

Question

I Bootstrap Datetime https://eonasdan.github.io/bootstrap-datetimepicker/

Wie in dem Dokument erwähnt verwende ich war erfolgreich in der Lage, die bis zu ändern, nach unten Pfeile unter Code.

$('#datetimepicker7').datetimepicker({ 
    sideBySide: true, 
    icons: { 
     up: "fa fa-chevron-circle-up", 
     down: "fa fa-chevron-circle-down", 
    } 
}); 

Darf ich wissen, wie man die linken, rechten Symbole des Kalenders ändert? Um das Verständnis zu erleichtern, habe ich die Symbole für Änderungen im unteren Bild hervorgehoben.

Jede Hilfe sehr geschätzt würde.

Answer 1

Um links und rechts Symbole zu ändern, müssen Sie nur in dem folgenden Code ändern:

icons: { 
     time: 'glyphicon glyphicon-time', 
     date: 'glyphicon glyphicon-calendar', 
     up: 'glyphicon glyphicon-chevron-up', 
     down: 'glyphicon glyphicon-chevron-down', 
     //previous: 'glyphicon glyphicon-chevron-left', 
     previous: 'glyphicon glyphicon-backward', 
     next: 'glyphicon glyphicon-chevron-right', 
     today: 'glyphicon glyphicon-screenshot', 
     clear: 'glyphicon glyphicon-trash', 
     close: 'glyphicon glyphicon-remove' 
    }, 

standardmäßig die Linie, die ich habe gesagt, dass Symbol so zeigt, wenn u das Symbol ändern müssen Sie Sie müssen einfach nur den Pfad oder ein Symbol festlegen, das Sie anzeigen möchten.

Sie unter Link verweisen: https://eonasdan.github.io/bootstrap-datetimepicker/Options/

Answer 2

Sie müssen nur previous und next Schlüssel in Ihrem icons Objekt in der Konfiguration ein, wie in den docs angegeben.

$('#datetimepicker7').datetimepicker({ 
 
    sideBySide: true, 
 
    icons: { 
 
     up: "fa fa-chevron-circle-up", 
 
     down: "fa fa-chevron-circle-down", 
 
     next: 'fa fa-chevron-circle-right', 
 
     previous: 'fa fa-chevron-circle-left' 
 
    } 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group date" id="datetimepicker7"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
    </div> 
 
</div>