我有一個帶有日期串列的陣列，帶有可用性標志。
例如： -
[
{
...
date : 2021-11-18
isAvailable : true,
...
},
{
...
date : 2021-11-19
isAvailable : false,
...
}
]
當 isAvailable 為 true 或 false 時，我必須使用此資料在 datepicker 中的日期下方添加一個圖示（綠色/紅色）。
我必須使用角材料日期選擇器。
我不知道從哪里開始。
uj5u.com熱心網友回復：
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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360626.html