Angular 材质：突出显示周末的日期选择器
Posted
技术标签:
【中文标题】Angular 材质：突出显示周末的日期选择器【英文标题】：Angular material: datepicker highlighting weekends 【发布时间】：2019-12-07 23:05:57 【问题描述】：我想在日期选择器上突出显示周末（周六和周日）。
我已尝试重新调整lockedweekendfilter，该过滤器使用布尔值表示日期位置0（星期日）和位置6（星期六）。此代码来自 Material 站点版本 6。但是，它仅适用于禁用日期。我不想禁用周日和周六。
@Injectable()
export class InjectDatePickerGeneral
constructor()
lockedWeekendFilter(d: Date): boolean
const date = new Date(d);
const day = date.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
理想情况下，我想在日期选择器中为星期六和星期日添加一个类，这样我就可以更改颜色，也许还可以更改背景。
【问题讨论】：
这可能会有所帮助 - ***.com/questions/49761382/… 嗨杰·舒克拉，谢谢。 dateClass: 属性仅适用于材料 8。这就是为什么我必须指定我使用的是材料 6。 【参考方案1】：这仅使用 CSS 是可行的...扩展共享的示例 here
相关的CSS：
::ng-deep .mat-calendar-body > tr > td:nth-child(6) > .mat-calendar-body-cell-content,
::ng-deep .mat-calendar-body > tr > td:nth-child(7) > .mat-calendar-body-cell-content color:red !important;
::ng-deep .mat-calendar-body > tr > td:nth-child(6),
::ng-deep .mat-calendar-body > tr > td:nth-child(7) background: lightyellow;
用Material 5.2.4和angular 5.2.4完成working stackblitz
【讨论】：
帮助很大！非常感谢阿克伯！ 这是我使用你的方法所做的： .mat-calendar-table td:nth-child(7) > .mat-calendar-body-cell-content color: #dfa5a5 !important ; td:first-child > .mat-calendar-body-cell-content 颜色: #dfa5a5 !important; .mat-calendar-body > tr:first-child > td:last-child > .mat-calendar-body-cell-content color: #dfa5a5 !important; 仅在有 7 天的星期时工作，但如果星期四或更长的周末不会突出显示 1 天，则不会突出显示以上是关于Angular 材质：突出显示周末的日期选择器的主要内容，如果未能解决你的问题，请参考以下文章