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

Posted 2023-05-07

【中文标题】在 ng-bootstrap datepicker 中将 CSS 类应用于自定义日期模板

【英文标题】：Applying CSS classes to custom day template in ng-bootstraps datepicker

【发布时间】：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 类应用于每一天，当日期选择器被渲染时，而不是每次我点击任何地方时？

【问题讨论】：

***.com/questions/43214707/…

【参考方案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 中，我使用了两种方法并使用了两个计数器来显示另一种方法的改进