Angular Ng-Bootstrap Datepicker Calendar Day 背景颜色

Question

如何在 ng-bootstrap 日期选择器日历上更改 1+ 天的背景颜色，与选择一天时颜色变化的方式相同。

选择一天后，它会将 div class 更改为：

btn-light bg-primary text-white

假设我希望几天显示为

btn-light bg-success text-white

或

btn-light bg-warning text-white

best/easiest 方法是如何实现的？

谢谢

Answer 1

使用自定义日期，请参阅 https://ng-bootstrap.github.io/#/components/datepicker/examples#customday

中的示例

如果您的 customDay 类似于（简单地）

<ng-template #customDay let-date="date" 
           let-currentMonth="currentMonth" 
           let-selected="selected" let-disabled="disabled" let-focused="focused">
    {{ date.day }}
</ng-template>

您可以使用 date、currentMonth、selected、focused 或 disabled 来更改 class 例如

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <span [ngClass]="myClass(date)"  [class.focused]="focused"
        [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>
especialDates:NgbDateStruct[]=[
    {year:2018,month:2,day:1},
    {year:2018,month:2,day:10}]
myClass(date:NgbDateStruct)
{
    let isSelected=this.specialDates
         .find(d=>d.year==date.year && d.month==date.month && d.day==date.day)
    return isSelected?'classSelected':'classNormal'
}

见https://stackblitz.com/edit/angular-ng-bootstrap-demo-vrxfeu

Angular Ng-Bootstrap Datepicker Calendar Day 背景颜色

Angular Ng-Bootstrap Datepicker Calendar Day Background color

datepicker

ng-bootstrap

angular