Question

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

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

btn-light bg-primary text-white

让我们说我想要好几天出现

btn-light bg-success text-white

或

btn-light bg-warning text-white

实现这一目标的最佳/最简单方法是什么？

谢谢

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来更改类 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日历天背景颜色

1 个答案: