Custom datetimepicker hover color

Question

By default, hovering color of table and button in DateTimePicker is grey, how to change it into custom color? I tryed the css code below but nothing happens.

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

score 2 · Answer 1 · answered Mar 17 '17 at 06:11

2

Here you go:

.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. Look into the basics of Chrome DevTools.

answered Mar 17 '17 at 06:11

Uzbekjon

11,655
3
37
54

thank you but this code only change time value hover color, how to i change button hovering color too? – Long Lý Mar 17 '17 at 06:48
What button color? Please add a screenshot or more specific info. – Uzbekjon Mar 17 '17 at 09:41

score 1 · Accepted Answer · edited May 23 '17 at 12:17

The problem is that the buttons are not <button> elements, so your CSS rule is not matched.

You can use data-action attribute to select a button element and set colors as you want.

Here a live example for the close button.

$('#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>

Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.

P.S. I've set up the example starting from your previous question.

Custom datetimepicker hover color

2 Answers2