在 ng-bootstrap datepicker 中将 CSS 类应用于自定义日期模板答案

【问题标题】：Applying CSS classes to custom day template in ng-bootstraps datepicker在 ng-bootstrap datepicker 中将 CSS 类应用于自定义日期模板
【发布时间】：2022-01-19 11:16:39
【问题描述】：

所以我使用 ng-bootstraps datepicker 来显示每天的一些用户数据。我使用自定义日期模板来应用某些 CSS 类

<ng-template #customDay let-date>
  <div
    class="custom-day"
    [ngClass]="evaluatePresenceType(date)"
  >
    {{ date.day }}
  </div>
</ng-template>

问题是这种方法每天都会被多次调用，这不是最佳的。有没有办法将 CSS 类应用于每一天，当日期选择器被渲染时，而不是每次我点击任何地方时？

【问题讨论】：

stackoverflow.com/questions/43214707/…

标签： css angular typescript datepicker ng-bootstrap

【解决方案1】：

当您想使用自定义模板日为“特价日”提供一些课程时，您有两种方法：

使用[ngClass] 或[class.myClass]="function(date)" 表示
使用DayTemplateData（见docs）

嗯，文档不是很清楚。这个想法是有一个功能，例如

  data=(date: NgbDate, current?: {year: number, month: number})=>
  {
    //see that futhermore the "date" you has an object
    //current with two properties: "year" and "month" that is showing

    
    return this.calendar.getWeekday(date)>=6?'square':null
  }

那你就用

<input class="form-control" [dayTemplateData]="data"
             [dayTemplate]="customDay" ...>

您的模板日使用 let-data=data 传递“数据”

<ng-template #customDay let-date let-data="data" ...>
  <span class="custom-day" [ngClass]="data" ...>
    {{ date.day }}
  </span>
</ng-template>

请注意，如果您只想应用一个独特的类，您的函数可以返回 true 或 null 并使用 [class.myClass]="data"

在stackblitz 中，我使用了两种方法并使用了两个计数器来显示另一种方法的改进

【讨论】：