角Ng-Bootstrap Datepicker日历天背景色 [英] Angular Ng-Bootstrap Datepicker Calendar Day Background color

问题描述

如何更改ng-bootstrap datepicker日历上1天以上的背景颜色，就像选择一天时更改颜色一样。

how can I change the 1+ days background color on ng-bootstrap datepicker calendar, in the same way as the color changes when a day is selected.

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

When a day is selected, it changes the div class to:

btn-light bg-primary text-white

假设我希望几天出现为

btn-light bg-success text-white

或

btn-light bg-warning text-white

如何做到最好/最简单的方法？

How is the best/easiest way to achieve this?

感谢您

推荐答案

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

using a custom day, see the example in https://ng-bootstrap.github.io/#/components/datepicker/examples#customday

如果您的customDay就像（简单）

if your customDay is like (simply)

<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或disable来更改
类，例如

You can use date,currentMonth,selected,focused or disabled to change the class e.g.

<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

这篇关于角Ng-Bootstrap Datepicker日历天背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！