【问题标题】:Angular material: datepicker highlighting weekendsAngular 材质:突出显示周末的日期选择器
【发布时间】: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;
    }
}

理想情况下,我想在日期选择器中为星期六和星期日添加一个类,这样我就可以更改颜色,也许还可以更改背景。

【问题讨论】:

标签: css angular typescript angular6 angular-material-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.4angular 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 天,则不会突出显示
猜你喜欢
  • 1970-01-01
  • 2020-08-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-01
  • 1970-01-01
  • 2023-04-09
相关资源
最近更新 更多