将自定义样式应用于 Bootstrap Datepicker 中的活动日期

Question

我目前正在使用 Bootstrap-datepicker 和 Bootstrap 5。我正在尝试修改日期选择器中活动日期的背景颜色。然而，我的自定义样式似乎被覆盖了。

阅读完文档后，我无法成功更改活动日期的背景颜色。以下是我尝试的简化版本：

$('.input-group.date').datepicker({
  format: "MM yyyy",
  startView: 2,
  minViewMode: 1,
  maxViewMode: 2,
  autoclose: true,
  todayHighlight: true,
});

.datepicker table tr td span.active.active {
  background-color: red !important;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

<div class="input-group date">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

我也尝试了s.kuznetsov的建议，但无法按照建议修改颜色。

Answer 1

我不确定您从哪里获得选择器。使用浏览器的文档检查器快速查看内容会显示该元素上的类

year

和

focused

。

$('.input-group.date').datepicker({
  format: "MM yyyy",
  startView: 2,
  minViewMode: 1,
  maxViewMode: 2,
  autoclose: true,
  todayHighlight: true,
});

.datepicker .focused {
  background-color: red !important;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

<div class="m-5">
  <div class="input-group date">
    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
  </div>
</div>