Question

我正在尝试根据从api调用中收到的一组有效日期来过滤材料日期。我遇到了一个问题，即直到单击第4-5个下一个/上一个月份的按钮（直到选中过滤器日期中的调试器时），日期过滤器才会启动。

我正在使用自定义标头组件来检测事件，并使用日历服务来监视其他组件，我将不胜感激任何帮助/指导。目的是当用户单击下一个箭头/上一个箭头时更新过滤的日期

自定义标题组件

export class CustomCalendarHeaderComponent<D> {
constructor(
    private _calendar: MatCalendar<D>, private _dateAdapter: DateAdapter<D>, @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
    cdr: ChangeDetectorRef, private calendarService: CalendarService) {
    _calendar.stateChanges
      .pipe(takeUntil(this._destroyed))
      .subscribe(() => cdr.markForCheck());
      this.validDatesListener();

  }

  validDatesListener(){
    this.calendarService.currentValidDates$.subscribe(data => {
      if(data){
        this.filterDates(data);
      }
    });
  }

   previousClicked() {
    this._calendar.activeDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1);
    this.calendarService.currentViewDate = moment(this._calendar.activeDate).format('YYYY-MM-DD');

  }

  filterDates(dates) {
    debugger;
    this._calendar.dateFilter = (date: D): boolean => {    <------ This doesnt function properly 
      let receivedD = moment(date).format('YYYY-MM-DD');
      return dates.some(e => moment(e.date).format('YYYY-MM-DD') == receivedD);
    };
  }

  nextClicked() {
    this._calendar.activeDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1);
    this.calendarService.currentViewDate = moment(this._calendar.activeDate).format('YYYY-MM-DD');
  }
}

我正在使用此日历的组件，我有以下侦听器

  <<<Excluded code>>>

private dateFilter = (date: Date): boolean => { return true; }

calendarMonthEventListener() {
    //date stored in YYYY-MM-DD
    this.calendarService.currentViewDate$.subscribe(async date => {
      if (date) {
        let adventurerCount = this.selectedAdventurers;
        let startD = moment(this.minBookingDate).format('YYYY-MM-DD');
        let endD = moment(date).add(30, 'days').format('YYYY-MM-DD');
        await this.ecoService.getAvailibility(this.activityId, adventurerCount, date, endD)
          .then(data => {
            this.calendarService.currentValidDates = data.map(e => e.date);
          });
      }
    });
  }
<<Excluded code>>

在上述组件模板中，我将日历称为：

<mat-form-field class="datepicker">
                  <input [matDatepickerFilter]="dateFilter" [min]="minBookingDate" placeholder="DD/MM/YYYY"
                    class="form-control" matInput formControlName="selectedDate" [matDatepicker]="picker" />
                  <mat-datepicker-toggle  matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker [calendarHeaderComponent]="customDateHeaderComponent" #picker></mat-datepicker>
                </mat-form-field>

我的日历服务：

export class CalendarService {

  private _currentViewDate = new BehaviorSubject(null as string);
  private _currentValidDates = new BehaviorSubject(null as string[]);
  constructor() { }

  get currentViewDate$() {
    return this._currentViewDate.asObservable();
  }

  set currentViewDate(date: string) {
    console.log("SETTTTING");
    this._currentViewDate.next(date);
  }
  destroy() {
     this._currentViewDate.next(null);
  }
  get currentValidDates$(){
    return this._currentValidDates.asObservable();
  }
  set currentValidDates(validDates: string[]){
     this._currentValidDates.next(validDates);
  }
}

自定义标题模板

<div class="header">
    <button mat-icon-button (click)="previousClicked()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
    <span class="header-label">{{periodLabel}}</span>
    <button mat-icon-button (click)="nextClicked()">
      <mat-icon>keyboard_arrow_right</mat-icon>
    </button>
  </div>

在月份更改事件中过滤物料日期选择器日期

0 个答案: