Angular Material DatePicker 的多个日期范围过滤器

我的数据中有多个 startDate 和 endDate，我想将其用于 Angular 的 datePicker 材质中禁用的日期范围。

我看到这个问题：link https://stackoverflow.com/questions/57904882/angular-how-to-configure-a-date-picker-to-disable-multiple-date-ranges/73433548?noredirect=1#comment129681283_73433548, 但在这个例子中是两个表，在我的例子中我有很多表，所以我用循环开始代码，但我不知道如何使用它

这是我的代码：

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<Array<any>> = [];
  dateDisabled!: any;

  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) => {
          res.forEach((element: any) => {
            this.dateBooking.push([
              new Date(element.startDate),
              new Date(element.endDate),
            ]);
          });

          this.dateBooking.forEach((element) => {
            element.forEach((date) => {
              console.log(date);
            });
          });

          this.dateDisabled = (date: Date | null): any => {
            return (
              !(
                date! >= this.dateBooking[1][0] &&
                date! <= this.dateBooking[1][1]
              ) && date! >= new Date()
            );
          };
        },
      });
  }
}

谢谢你的帮助????

当你使用 Date javascript 对象时你需要小心

mat-datepicker 返回一个类型的日期对象，例如

Mon Sep 19 2022 00:00:00 GMT+0200

当您使用时，例如

new Date('2022-08-24')
//you get
Date Wed Aug 24 2022 02:00:00 GMT+0200

看看如何添加“02:00:00” - 因为我在 GTM+0200。因此，您首先需要的是使用 setHours 将您的范围设置为 00:00:00

res.forEach((element: any) => {
   const el=[
          new Date(element.startDate),
          new Date(element.endDate),
        ]
        el[0].setHours(setHours(0, 0, 0, 0))
        el[1].setHours(setHours(0, 0, 0, 0))
        this.dateBooking.push(el);
      });
}

同样，你需要小心对待“今天”。所以在 ngOnInit 中你可以使用

  ngOnInit() {

    //see how use setHours also in today
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    this.dateDisabled = (date: Date | null): any => {
      if (date! < today) return false;
      for (let i = 0; i < this.dateBooking.length; i++) {
        if (date! >= this.dateBooking[i][0] && date! <= this.dateBooking[i][1])
          return false;
      }
      return true;
    };

    //or

    this.dateDisabled = (date: Date | null): any => {
      return (
        date! >= today &&
        this.dateBooking.reduce((a, b) => {
          return a && (date! < b[0] || date! > b[1]);
        }, true)
      );
    };
  }

注意：第二种方法循环遍历 dateBooking 的所有元素。它看起来比第一个慢，但实际上花费的时间（30 天* dateBooking.length）并不可观

see 堆栈闪电战 https://stackblitz.com/edit/angular-nosmhs?file=src%2Fapp%2Fdatepicker-overview-example.ts

注意2：如果您需要多个“dateDisabled”函数，请使用函数数组

dateDisabled:((date: Date | null)=>any)[]=[]

//  and use 
dateDisabledObj[index]=(date: Date | null): any => {...}

Or 和函数对象

dateDisabledObj:any={}

// and use 
dateDisabledObj[''+id]=(date: Date | null): any => {...}