Question

默认情况下，DateTimePicker中的表格和按钮的悬停颜色是灰色的，如何将其更改为自定义颜色？我尝试了下面的css代码但没有任何反应。

    FileStream fs = new FileStream("product.txt", FileMode.OpenOrCreate, FileAccess.Read);
    StreamReader sr = new StreamReader(fs);

    sr.BaseStream.Seek(0, SeekOrigin.Begin);
    string str = sr.ReadLine();
    while (str != null)
    {
        Console.WriteLine("{0}", str);
        str = sr.ReadLine();
    }
    sr.Close();
    fs.Close();

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属性选择按钮元素并根据需要设置颜色。

这是关闭按钮的实例。

$('#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开始设置示例。

自定义datetimepicker悬停颜色

2 个答案: