Couleur du curseur personnalisé datetimepicker

Question

Par défaut, la couleur de la table et du bouton de DateTimePicker est grise, comment la changer en couleur personnalisée? J'ai essayé le code CSS ci-dessous mais rien ne se passe.

.bootstrap-datetimepicker-widget table td.active:hover{ 
    background-color: #337ab7; 
    color:#fff; 
} 
.bootstrap-datetimepicker-widget button:hover{ 
    background-color: #337ab7; 
    color:#fff; 
} 

Answer 1

Le problème est que les boutons ne sont pas <button> éléments, donc votre règle CSS ne correspond pas.

Vous pouvez utiliser l'attribut data-action pour sélectionner un élément de bouton et définir les couleurs comme vous le souhaitez.

Voici un exemple en direct pour le bouton de fermeture.

$('#datetimepicker1').datetimepicker({ 
 
    useCurrent: false, 
 
    format: "YYYY/MM/DD HH:mm ZZ", 
 
    //locale: "ja", 
 
    sideBySide: true, 
 
    toolbarPlacement: "bottom", 
 
    showClose: true, 
 
    icons: { 
 
     close: 'closeText' 
 
    } 
 
});

.closeText:before { 
 
    content: "Close"; 
 
} 
 

 
.bootstrap-datetimepicker-widget table td a[data-action="close"]>span:hover { 
 
    /* Set her your custom color */ 
 
    background-color: #337ab7; 
 
    color: #fff; 
 
}

<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>

Notez que le sélecteur a l'option qui vous permet debug inspectez HTML composant simplyfy personnalisation de style.

P.S. J'ai mis en place l'exemple à partir de your previous question.

Answer 2

Ici, vous allez:

.bootstrap-datetimepicker-widget table td.day:hover, 
.bootstrap-datetimepicker-widget table td.hour:hover, 
.bootstrap-datetimepicker-widget table td.minute:hover, 
.bootstrap-datetimepicker-widget table td.second:hover { 

    background-color: #123456; // Your custom color 

} 

PS. Regardez dans les bases de Chrome DevTools.