Question

我正在使用saturn daterange-picker并将卫星日历用于日期范围选择器实现。现在，用户只能选择某个其他对象（时间卡）还没有可添加新条目的时间卡的月份。

我们有一个实现，它会在（点击）事件上禁用所有这些月份，这意味着多年视图和月份视图也会被触发，这有时会阻止选择（请参阅gif。）。

在我们的代码html中，我们具有以下内容：

<sat-calendar
    #calendar
    [dateFilter]="filterdate"
    [rangeMode]="true"
    [minDate]="minDate"
    [maxDate]="maxDate"
    orderPeriodLabel="month"
    (dateRangesChange)="onDateRangesChange(calendar, $event)"
    (monthSelected)="functionName($event)"
    (selectedChange)="functionName($event)"
    (click)="onMonthChange(calendar)"
  ></sat-calendar>

和我们的组件：

import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { DateAdapter, SatCalendar, SatDatepickerRangeValue } from 'saturn-datepicker';
// left out imports    
@Component({
  selector: 'date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
})
export class DatePickerComponent implements OnInit, OnChanges {
  minDate: Date;
  maxDate: Date;

  filterdate: any;

  @Input() placement: Placement;
  @Input() placementTimesheets: PlacementTimesheet[];
  @Output() readonly updateDateRange: EventEmitter<SatDatepickerRangeValue<Date>> = new EventEmitter();
  @ViewChild('calendar') calendar: SatCalendar<Date>;

  range?: SatDatepickerRangeValue<Date>;
  constructor(private readonly dateAdapter: DateAdapter<Date>) {}

  ngOnInit(): void {
    this.dateAdapter.getFirstDayOfWeek = () => 1;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.placement) {
      if (this.placement) {
        this.minDate = new Date(this.placement.startDate);
        this.maxDate = new Date(this.placement.endDate);
      }
    }

    if (changes.placementTimesheets) {
      if (this.placementTimesheets) {
        this.onMonthChange(this.calendar);
      }
    }
  }

  functionName(date) {
    console.log(date);
  }

  onMonthChange(calendar: SatCalendar<Date>): void {
    const activeTimesheetPlacement = this.getActivePlacementTimesheet(calendar);
    const enabledPlacementStatus = [0, 1 , 2];

    if (typeof activeTimesheetPlacement !== 'undefined' && !enabledPlacementStatus.includes(activeTimesheetPlacement.status)) {
      this.setMonthEnabled(false);
    } else {
      this.setMonthEnabled(true);
    }
  }

  onDateRangesChange(calendar: SatCalendar<Date>, range: SatDatepickerRangeValue<Date>): void {
    calendar.beginDate = range.begin;
    calendar.endDate = range.end;
    this.range = range;
    this.updateDateRange.emit(this.range);
  }

  private setMonthEnabled(isEnabled: boolean): void {
    this.filterdate = (d: Date): boolean => isEnabled;
  }

  private getActivePlacementTimesheet(calendar: SatCalendar<Date>): PlacementTimesheet {
    // get current month (0-11)
    let activeMonth = new Date().getMonth();
    let activeYear = new Date().getFullYear();

    if (calendar.activeDate) {
      activeMonth = new Date(calendar.activeDate).getMonth();
      activeYear = new Date(calendar.activeDate).getFullYear();
    }

    // Add 1 to make months 1-12
    activeMonth = activeMonth + 1;

    return this.placementTimesheets.find(x => x.year === activeYear && x.month === activeMonth);
  }
}

这些事件在Mat-calendar-header实现中。有没有办法利用日历上的输出器来监听这些事件？因为（点击）对我来说太宽泛了。在我的模板中，我仅使用sat-calendar（或mat-calendar），但我看到它使用mat-calendar-header作为默认值。

或者...是否有更好的方法从日期选择器中筛选出这些值以使其禁用，并且仍然可以在多年和月份视图中选择月份和年份？

如何收听日历日历标题事件

0 个答案: