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

Question

我有一个数组，其中包含日期列表和可用性标志。

例如：-

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

当 isAvailable 为 true 或 false 时，我必须使用此数据在日期选择器中的日期下方添加一个图标 (green/red)。

我必须使用 angular material 日期选择器。

我不知道从哪里开始。

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;
}

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

Highlight dates in a datepicker based on list of dates in Angular

datepicker

typescript

angular-material

angular