如何移除Angular Material Datepicker中今日日期的默认焦点

可以实现，你试过的restoreFocus是控制关闭弹窗后焦点回退的属性，[startAt]="null"实际运行时会默认 fallback 到今日日期，所以不生效，可通过以下两种方案实现需求：

方案1：CSS样式覆盖（最便捷） #

Angular Material 给今日日期单元格默认加了.mat-calendar-body-today类控制高亮样式，直接覆盖该类的样式即可移除高亮效果：

/* 组件样式中需要加::ng-deep，全局样式可直接写 */
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-hover) {
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

如果要完全移除该单元格的聚焦状态，可追加：

::ng-deep .mat-calendar-body-today {
  &:focus, &:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

方案2：结合事件监听+日期定位（适合需要调整默认打开视图的场景） #

你的场景是选择出生日期，可直接将datepicker默认打开的月份定位到符合用户群体的过去日期，同时禁用今日高亮：

1. 先修改模板代码，给datepicker绑定opened事件，同时设置startAt为默认定位日期：

<mat-form-field appearance="fill">
  <mat-label>选择出生日期</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [startAt]="defaultBirthStart" (opened)="onPickerOpen()"></mat-datepicker>
</mat-form-field>

2. 组件TS中添加对应逻辑：

import { DateAdapter } from '@angular/material/core';

// 类中定义
defaultBirthStart = new Date(2000, 0, 1); // 可根据你的用户群体调整默认打开的年月

constructor(private dateAdapter: DateAdapter<Date>) {}

onPickerOpen() {
  // 主动移除今日日期的焦点
  setTimeout(() => {
    const todayEl = document.querySelector('.mat-calendar-body-today') as HTMLElement;
    if (todayEl) {
      todayEl.blur();
    }
  }, 0);
}

两种方案都可以完全移除今日日期的默认高亮和焦点效果，方案1无需修改TS代码更简单，方案2更贴合出生日期选择的用户体验，可按需选择。

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