Angular Material Calendar 设置始终关注今天的日期

Question

每当我单击 Angular Material Calendar 上的任何日期时，今天的日期图块都会突出显示。 即使是在其他月份，这一天也会突出显示。

这是错误还是功能？ 我说功能，因为即使在文档示例中，这也是可重现的。

这是一些代码供参考和演示

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>

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

/** @title Datepicker inline calendar example */
@Component({
  selector: 'datepicker-inline-calendar-example',
  templateUrl: 'datepicker-inline-calendar-example.html',
  styleUrls: ['datepicker-inline-calendar-example.css'],
})
export class DatepickerInlineCalendarExample {
  selected: Date | null;
}

单击日历时，似乎这一天得到了关注。 此外，这似乎只在 Safari 中是正确的。

如何快捷方式的错误？

Answer 1

根据 Angular Material 文档，没有属性可以将当前日期选择设置为隐藏。 因此，我认为这是 Angular 开发团队提供的一项功能。

请在此处找到角度官方文档。

但是，如果你想对用户隐藏当前日期的选择，可以通过操作 Angular 的style.scss来解决。

请在此处找到有效的 stackblitz。

通过将以下样式添加到您的style.scss您将能够覆盖当前选择：

    .mat-calendar-body-today
      :not(.mat-calendar-body-selected)
      :not(.mat-calendar-body-comparison-identical) {
      background-color: rgb(255 255 255) !important;
      border: none !important;
    }

在组件 HTML 中：

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<p>Selected date: {{selected}}</p>

在组件 TS 中：

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

/** @title Datepicker inline calendar example */
@Component({
  selector: 'datepicker-inline-calendar-example',
  templateUrl: 'datepicker-inline-calendar-example.html',
  styleUrls: ['datepicker-inline-calendar-example.css'],
})
export class DatepickerInlineCalendarExample {
  selected: Date | null;
}

Answer 2

找到了解决 Safari 中错误的方法，该错误使今天的日期成为焦点，以月份为准。

.mat-calendar-body-active>.mat-calendar-body-cell-content.mat-focus-indicator{
    background:transparent !important
}
 

这消除了当天不必要的关注