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

Posted 2023-03-13

【中文标题】根据 Angular 中的日期列表突出显示日期选择器中的日期

【英文标题】：Highlight dates in a datepicker based on list of dates in Angular

【发布时间】：2021-12-29 04:29:29

【问题描述】：

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

例如：-

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

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

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

我不知道从哪里开始。

【问题讨论】：

检查：material.angular.io/components/datepicker/…

【参考方案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;

【讨论】：

逻辑效果很好，但是样式颜色整个边框底部，我只想要一个点。