Angular Material 日期选择器日期类

Question

如何在函数中手动更新 dateClass？ datepicker

HTML

<mat-datepicker
    [dateClass]="dateClass"
    #picker
    fxLayoutAlign="start start"
    (opened)="appendFooter()"
  >
  </mat-datepicker>

TS

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
...
};

Answer 1

一种方法是将 dateclass 绑定到一个函数，该函数 return 一个函数 (date: Date)=>string|null)

想象一下

dateClass(type:any) {
    switch (type)
    {
       case 0:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
       case 1:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
}

你可以有一个变量类型并使用

 <mat-datepicker [dateClass]="dateClass(type)">...</mat-datepicker>

但请注意，“dateClass”函数仅在您打开日期选择器或更改月份（每天一次）时执行

我觉得您正在寻找这样的。好吧，您可以采用这种方法，并在单击时调用函数“changeMonth”

Answer 2

我的应用程序中出现了一些伪造结果的奇怪行为。我修好了它。我的最终解决方案：

document.querySelectorAll('.mat-calendar-body-cell-content'); 
elements.forEach((x) => {let day: number = parseInt(x.textContent);

最后我读了日历上的数字并将它们与日期进行了比较。这不是最好的解决方案，但它确实有效。

感谢@Eliseo 提供链接解决方案的正确想法

Angular Material 日期选择器日期类

Angular Material Datepicker DateClass

angular-material

angular