Angular Material DatePicker多日期范围禁用实现求助

你现有代码的核心问题是dateDisabled函数仅固定判断了dateBooking[1]这一组日期范围，未遍历所有已获取的预订日期，因此无法批量禁用多组日期。以下是修正后的完整代码及关键说明：

import { formatDate } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map, Observable } from 'rxjs';
import { Booking } from 'src/app/core/models/booking.model';
import { BookingService } from 'src/app/core/services/booking.service';

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.scss'],
})
export class BookingComponent implements OnInit {
  idAccommodation!: number;
  bookingAccommodation$!: Observable<Booking[]>;
  dateBooking: Array<[Date, Date]> = []; // 明确类型为日期数组的数组
  dateDisabled!: (date: Date | null) => boolean; // 明确返回值类型

  constructor(
    private activedRoute: ActivatedRoute,
    private bookingService: BookingService
  ) {}

  ngOnInit(): void {
    this.idAccommodation = +this.activedRoute.snapshot.params['id'];
    this.bookingService
      .getBookingByIdAccommodation(this.idAccommodation)
      .pipe(map((res: any) => res['hydra:member']))
      .subscribe({
        next: (res: any) => {
          // 整理预订日期范围，转换为Date对象存入数组
          this.dateBooking = res.map((element: any) => [
            new Date(element.startDate),
            new Date(element.endDate)
          ]);

          // 修正日期禁用逻辑：遍历所有预订范围判断当前日期状态
          this.dateDisabled = (date: Date | null): boolean => {
            if (!date) return false; // 空日期直接禁用
            
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 重置今天的时分秒，避免时间部分干扰判断
            
            // 1. 禁用今天之前的日期
            if (date < today) return false;
            
            // 2. 检查当前日期是否在任意一个已预订范围内，是则禁用
            const isInBookedRange = this.dateBooking.some(([start, end]) => {
              start.setHours(0, 0, 0, 0);
              end.setHours(0, 0, 0, 0);
              return date >= start && date <= end;
            });
            
            return !isInBookedRange; // 不在预订范围内则返回true（可用）
          };
        },
      });
  }
}

关键修改说明： #

• 类型明确化：标注dateBooking和dateDisabled的具体类型，提升代码可读性与类型安全性。
• 日期处理优化：重置所有日期的时分秒为0，避免因时间差异（比如预订起始时间为凌晨，当前判断日期为下午）导致的判断误差。
• 多范围遍历判断：使用Array.some()遍历所有预订范围，只要当前日期落在任意一个范围内，就标记为禁用状态。
• 逻辑梳理：先判断是否为过去日期，再检查是否在预订范围内，逻辑层级更清晰。

最后确保模板中正确绑定dateFilter属性：

<mat-datepicker [dateFilter]="dateDisabled"></mat-datepicker>

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