嘿，我懂你想要的效果——给Angular Material日期选择器里的周六、周日加上自定义样式高亮，而不是把它们禁用掉对吧？之前你用的那个lockedWeekendFilter是用来控制日期能否选择的，显然不符合需求，那我们换两种更合适的方法来实现：

方法一：自定义日期单元格组件（直观灵活） #

这种方式通过替换默认的日期单元格模板，直接在组件里判断日期是否为周末并添加样式，逻辑清晰易维护。

1. 创建自定义日期单元格组件 #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-weekend-highlight-cell',
  template: `
    <div 
      [class.weekend-highlight]="isWeekend"
      [class.mat-calendar-body-selected]="selected"
      [class.mat-calendar-body-disabled]="disabled"
      class="mat-calendar-body-cell-content"
    >
      {{ date.getDate() }}
    </div>
  `,
  styles: [`
    .weekend-highlight {
      background-color: #f8f9fa; /* 自定义周末背景色 */
      color: #dc3545; /* 自定义周末文字颜色 */
      border-radius: 50%; /* 可选：给日期加圆角 */
    }
  `]
})
export class WeekendHighlightCellComponent {
  @Input() date!: Date;
  @Input() selected!: boolean;
  @Input() disabled!: boolean;

  // 判断当前日期是否为周末（0=周日，6=周六）
  get isWeekend(): boolean {
    const day = this.date.getDay();
    return day === 0 || day === 6;
  }
}

2. 在模块中声明组件 #

确保你的模块导入了Material日期选择器相关模块，并声明自定义组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { WeekendHighlightCellComponent } from './weekend-highlight-cell.component';

@NgModule({
  declarations: [WeekendHighlightCellComponent],
  imports: [
    CommonModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  exports: [WeekendHighlightCellComponent]
})
export class DatepickerCustomModule { }

3. 在模板中使用自定义单元格 #

在你使用mat-datepicker的地方，通过matCalendarCellTemplate指定我们的自定义组件：

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input matInput [matDatepicker]="datePicker">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker>
    <mat-datepicker-content>
      <ng-template 
        matCalendarCellTemplate 
        let-date 
        let-selected="selected" 
        let-disabled="disabled"
      >
        <app-weekend-highlight-cell 
          [date]="date" 
          [selected]="selected" 
          [disabled]="disabled"
        ></app-weekend-highlight-cell>
      </ng-template>
    </mat-datepicker-content>
  </mat-datepicker>
</mat-form-field>

方法二：扩展MatDatepickerIntl添加CSS类 #

如果你不想创建额外组件，可以通过扩展Material的国际化服务，给周末日期添加自定义CSS类。

1. 自定义MatDatepickerIntl服务 #

import { Injectable } from '@angular/core';
import { MatDatepickerIntl } from '@angular/material/datepicker';

@Injectable()
export class CustomDatepickerIntl extends MatDatepickerIntl {
  // 重写方法，给周末日期追加自定义类
  override getCalendarCellCssClasses(date: Date): string {
    const day = date.getDay();
    let customClasses = '';
    if (day === 0 || day === 6) {
      customClasses += 'weekend-highlight ';
    }
    // 保留原有类名，避免覆盖默认样式
    return customClasses + super.getCalendarCellCssClasses(date);
  }
}

2. 在模块中提供该服务 #

@NgModule({
  providers: [
    { provide: MatDatepickerIntl, useClass: CustomDatepickerIntl }
  ]
})
export class AppModule { }

3. 添加全局样式 #

在全局样式文件（比如styles.css）中定义周末的高亮样式：

.weekend-highlight .mat-calendar-body-cell-content {
  background-color: #f8f9fa;
  color: #dc3545;
  border-radius: 50%;
}

两种方法都能实现周末日期的高亮，且不会禁用它们，你可以根据自己的项目需求选择~

内容的提问来源于stack exchange，提问作者Chaco