Apply Custom Styles to the Active Date in Bootstrap Datepicker

Question

I am currently using the bootstrap-datepicker with Bootstrap 5. I am attempting to modify the background color of the active date within the date picker. However, it seems that my custom styling is being overridden.

After reading through the docs, I am unable to successfully change the background color of the active date. Below is a simplified version of my attempts:

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

I've also attempted s.kuznetsov's suggestion, but was unable to modify the colors as suggested.

Answer 1

I'm not sure where you got your selector. A quick look at things with your browser's document inspector shows classes active and focused on that element, which is a span. You also have to nullify the background gradient image in some cases.

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

.datepicker .active,
.datepicker .focused {
  background-color: red !important;
  background-image: none !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>