自定义日期时间选择器悬停颜色

Question

DateTimePicker中table和按钮的悬停颜色默认为灰色，请问如何改成自定义颜色？我尝试了下面的 css 代码，但没有任何反应。

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

Answer 1

给你：

.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。查看 Chrome DevTools.

的基础知识

Answer 2

问题是按钮不是 <button> 元素，所以你的 CSS 规则不匹配。

您可以将 data-action 属性用于 select 按钮元素并根据需要设置颜色。

这里是关闭按钮的实例。

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

请注意，选择器具有 debug 选项，允许您检查组件的 HTML 以简化样式自定义。

P.S。我设置了从 your previous question.

开始的示例

自定义日期时间选择器悬停颜色

Custom datetimepicker hover color

ruby-on-rails

datetimepicker

eonasdan-datetimepicker