Question

我正在使用带有bootstrap-datepicker的日期输入来显示日历以供用户选择日期。我正在尝试更改背景和头部的颜色，但是它不起作用

这是我的HTML代码：

<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>

我尝试使用这些代码行来更改颜色，但是没有用：

 .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; 
 }

有使其工作的任何提示吗？

Answer 1

组件样式通常仅适用于组件自己模板中的HTML。

将:: ng-deep伪类应用于任何CSS规则将完全禁用该规则的视图封装。

例如，如果您在style.css中执行datepicker样式，则我经常不得不使用/ deep /，:: ng-deep或>>>修饰符。您的情况应该是::ng-deep .bs-datepicker-head,

您可能还会看到theming bootstrap “ Bootstrap的许多组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。可以在Sass中循环使用此映射以快速生成一系列规则集。”

无法更改bootstrap-datepicker的颜色

1 个答案: