I have implemented a date input using bootstrap-datepicker to provide a calendar for users to select dates. However, I am facing difficulty in changing the background and head's color.
Below is my HTML code:
<div class="row mb-1">
<label class="col-lg-4 col-form-label col-form-label-sm"
for="time">End Date</label>
<div class="col-lg-8 form-group">
<input id="endDate" type="text" placeholder="To" class="form-control" bsDatepicker
[bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-DD' }" [(ngModel)]="selectedEndDate"
(ngModelChange)="updateMyEndDate($event)" [ngModelOptions]="{standalone: true}">
</div>
</div>
I attempted to change the color through this code snippet, but it did not yield the desired result:
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td span.selected,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover
{
background-color: rgb(35, 87, 185) !important;
}
.bs-datepicker-body table td.week span
{
color: #6e8f88 !important;
}
Any suggestions on how to successfully achieve this effect?