根据 Angular 中的日期列表突出显示日期选择器中的日期

Question

我有一个包含日期列表的数组，带有可用性标志。

例如：-

[
   {
     ...
     date : 2021-11-18
     isAvailable : true,
     ...
   },
   {
     ...
     date : 2021-11-19
     isAvailable : false,
     ...
   }
]

当 isAvailable 为真或假时，我必须使用此数据在 datepicker 中的日期下方添加一个图标（绿色/红色）。

我必须使用角度材料日期选择器。

我不知道从哪里开始。

Answer 1

TS

dateArr = [
    {
        date: "2021-11-18",
        isAvailable: true
    },
    {
        date: "2021-11-19",
        isAvailable: false
    }
]

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    const index = this.dateArr.findIndex(x => new Date(x.date).toLocaleDateString() === cellDate.toLocaleDateString());
    if (index > -1) {
        if (this.dateArr[index].isAvailable) {
            return "date-red";
        } else if (!this.dateArr[index].isAvailable) {
            return "date-green";
        }
    }

    return '';
};

HTML

<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

CSS

.date-red {
    border-bottom: 10px solid #FF0000;
}

.date-green {
    border-bottom: 10px solid #00FF00;
}