Stil Wochen die Bootstrap Datepicker mit

Question

ich die bootstrap datepicker mit und nehme an, ich wünsche Stile auf den Kalender anwenden, die angezeigt werden, wenn der Kalender geöffnet:

1. Highlight 3/1/17 3/7/17 rot
2. Highlight 3/9/17 3/17/17 blau

Wie kann ich CSS verwenden, um dies zu tun? Gibt es eine Funktion in der API, die dies ermöglicht?

Answer 1

Es gibt keine direkte API für diese Funktion, aber Sie können die Option debug: true verwenden, um die Komponente HTML zu untersuchen.

Eine Möglichkeit zur Ausrichtung auf einen bestimmten Tag besteht in der Verwendung eines CSS-Selektors basierend auf dem Attributwert data-day, zum Beispiel: [data-day="03/01/2017"]. Hier ist ein vollständiges Live-Beispiel:

$('#datetimepicker1').datetimepicker({ 
 
    debug: true 
 
});

[data-day="03/01/2017"], [data-day="03/07/2017"]{ 
 
    background-color: red; 
 
} 
 

 
[data-day="03/09/2017"], [data-day="03/17/2017"]{ 
 
    background-color: blue; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/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/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

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

Here können Sie ein ähnliches Beispiel finden.