MatDatePicker如何显示其他月份的日期

情况1：仅显示前后月日期（不可选） #

MatDatePicker的日历组件默认会显示相邻月份的部分日期，但可能因默认样式被隐藏。如果你的日历没显示这些日期，可通过以下步骤修复：

1. 覆盖默认CSS，确保其他月份的日期可见：

.mat-calendar-body-other-month {
  display: table-cell !important;
  opacity: 0.6; /* 可选：降低透明度，区分当前月日期 */
}

情况2：显示并允许选择前后月日期 #

如果需要让这些前后月的日期可以被选择，需结合MatCalendar的属性配置：

1. 在模板中获取日期选择器的引用：

<input matInput [matDatepicker]="datePicker">
<mat-datepicker #datePicker></mat-datepicker>

2. 在组件类中通过ViewChild获取MatCalendar实例，设置相关属性：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatCalendar } from '@angular/material/datepicker';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('datePicker') datePicker!: MatCalendar<Date>;

  ngAfterViewInit(): void {
    // 强制显示其他月份的日期
    this.datePicker.showOtherMonths = true;
    // 允许选择其他月份的日期
    this.datePicker.selectOtherMonths = true;
  }
}

补充：自定义前后月日期样式 #

如果需要区分当前月和前后月的日期样式，可使用dateClass属性：

1. 在组件类中定义样式判断逻辑：

dateClass = (date: Date): string => {
  const currentMonth = new Date().getMonth();
  return date.getMonth() !== currentMonth ? 'other-month' : '';
};

2. 在模板中绑定该属性：

<mat-datepicker #datePicker [dateClass]="dateClass"></mat-datepicker>

3. 添加自定义CSS：

.other-month {
  color: #999;
  font-style: italic;
}

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