CODEWITHSUNDEEP
cssangularbootstrap-4angular7bootstrap-datepicker
user8845321
user8845321

Reputation: 121

Can't change the color of bootstrap-datepicker

I'm using a date input with bootstrap-datepicker to show a calendar for the user to pick a date. I'm trying to change the background and head's color, and it is not working

Here 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-D 
          D' }" [(ngModel)]="selectedEndDate"
          (ngModelChange)="updateMyEndDate($event)"  [ngModelOptions]=" 
          {standalone: true}">
        </div>
 </div>

I tried to change the color using those lines of code but didn't work:

 .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 tips to make it work ?

Upvotes: 0

Views: 1386

Answers (1)

ill
ill

Reputation: 362

Component styles normally apply only to the HTML in the component's own template.

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule.

If you do the datepicker styles in the style.css for example, I often have to use the /deep/, ::ng-deep or >>> modifiers. In your case that would be ::ng-deep .bs-datepicker-head,

You might also look at theming bootstrap "Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets."

Upvotes: 0

Related Questions