Angular Material 19：如何在月视图中实现日期范围选择？

功能支持说明 #

Angular Material 的 mat-calendar 组件本身没有内置范围选择的配置项，但可以通过自定义交互逻辑、状态管理和样式扩展，实现月视图下的日期范围选择功能，完全适配独立组件模式。

具体实现步骤 #

1. 组件逻辑准备（TypeScript） #

在组件中维护起始、结束日期状态，处理日期点击与 hover 交互：

import { Component } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import { MatCalendar, DateClickEvent, DateHoverEvent } from '@angular/material/datepicker';

@Component({
  selector: 'app-range-calendar',
  standalone: true,
  imports: [MatCalendar],
  templateUrl: './range-calendar.component.html',
  styleUrls: ['./range-calendar.component.scss']
})
export class RangeCalendarComponent {
  startDate: Date | null = null;
  endDate: Date | null = null;
  tempEndDate: Date | null = null;

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

  // 处理日期点击
  onDateClick(event: DateClickEvent<Date>): void {
    const targetDate = this.dateAdapter.normalize(event.value);
    if (!this.startDate) {
      // 首次点击设为起始日期
      this.startDate = targetDate;
      this.endDate = null;
      this.tempEndDate = null;
    } else if (!this.endDate && targetDate >= this.startDate) {
      // 二次点击且日期晚于起始，设为结束日期
      this.endDate = targetDate;
      this.tempEndDate = null;
    } else {
      // 重新选择起始日期
      this.startDate = targetDate;
      this.endDate = null;
      this.tempEndDate = null;
    }
  }

  // 处理日期 hover（优化交互体验）
  onDateHover(event: DateHoverEvent<Date>): void {
    if (this.startDate && !this.endDate) {
      const targetDate = this.dateAdapter.normalize(event.value);
      if (targetDate >= this.startDate) {
        this.tempEndDate = targetDate;
      }
    }
  }

  // 自定义日期类，用于高亮范围
  getDateClass(date: Date): string {
    const normalizedDate = this.dateAdapter.normalize(date);
    if (!this.startDate) return '';

    // 高亮起始日期
    if (this.dateAdapter.sameDate(normalizedDate, this.startDate)) {
      return 'range-start';
    }

    const activeEndDate = this.endDate || this.tempEndDate;
    // 高亮结束日期（临时或最终）
    if (activeEndDate && this.dateAdapter.sameDate(normalizedDate, activeEndDate)) {
      return 'range-end';
    }

    // 高亮区间内的日期
    if (activeEndDate && normalizedDate > this.startDate && normalizedDate < activeEndDate) {
      return 'range-middle';
    }

    return '';
  }
}

2. 模板修改（HTML） #

绑定交互事件与自定义日期类，可选添加范围展示：

<mat-calendar
  (dateClick)="onDateClick($event)"
  (dateHover)="onDateHover($event)"
  [dateClass]="getDateClass">
</mat-calendar>

<!-- 可选：展示选中的日期范围 -->
<div class="range-info" *ngIf="startDate">
  已选范围：{{ startDate | date:'yyyy-MM-dd' }}
  {{ endDate || tempEndDate ? ' → ' + (endDate || tempEndDate | date:'yyyy-MM-dd') : '' }}
</div>

3. 样式扩展（SCSS） #

添加高亮样式，适配日历单元格布局：

.range-start {
  background-color: #1976d2;
  color: #fff;
  border-radius: 50%;
}

.range-end {
  background-color: #1976d2;
  color: #fff;
  border-radius: 50%;
}

.range-middle {
  background-color: rgba(25, 118, 210, 0.2);
}

// 调整单元格内边距，确保高亮样式完整显示
.mat-calendar-body-cell {
  padding: 0;
}

.range-info {
  margin-top: 16px;
  font-size: 14px;
  color: #333;
}

4. 独立组件配置 #

确保组件 imports 中包含所需依赖，若需要自定义日期格式，需额外提供 DateAdapter 和 MAT_DATE_FORMATS 配置。

补充优化点 #

• 可扩展逻辑支持反向选择（当结束日期早于起始日期时自动交换两者）
• 添加清除范围的按钮，重置 startDate 和 endDate
• 若需结合表单，可将日期状态绑定到 FormGroup 控件中

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