Angular / Primeng - 使用事件绑定禁用今天/同一日期在日期范围内输入两次

如何解决Angular / Primeng - 使用事件绑定禁用今天/同一日期在日期范围内输入两次

我正在使用primeng日历来允许选择日期范围以及包含今天和清除按钮的按钮栏。

当今天按钮已经被选中一次时，我想禁用它，我不希望用户能够选择今天两次。

我尝试以不同的方式处理它，例如在第一次点击后禁用它，或完全删除样式，但我无法在范围内获取该按钮，因为它是组件的一部分。

该组件有一个我正在使用的 onTodayClick() 事件处理程序，但我不确定一旦点击它后如何禁用它。

我在 Stackblitz 中重新创建了代码：https://stackblitz.com/edit/primeng-calendar-demo-pekwrv?file=src%2Fapp%2Fapp.component.ts

TS：

导出类 AppComponent {

date9: Date;


dates: Date[];

rangeDates: Date[];

minDate: Date;

maxDate: Date;

es: any;

invalidDates: Array<Date>

ngOnInit() {
    this.es = {
        firstDayOfWeek: 1,dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],dayNamesMin: [ "D","L","M","X","J","V","S" ],monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],monthNamesShort: [ "ene","feb","abr","may","jun","jul","ago","sep","oct","nov","dic" ],today: 'Hoy',clear: 'Borrar'
    }

    let today = new Date();
    let month = today.getMonth();
    let year = today.getFullYear();
    let prevMonth = (month === 0) ? 11 : month -1;
    let prevYear = (prevMonth === 11) ? year - 1 : year;
    let nextMonth = (month === 11) ? 0 : month + 1;
    let nextYear = (nextMonth === 0) ? year + 1 : year;
    this.minDate = new Date();
    this.minDate.setMonth(prevMonth);
    this.minDate.setFullYear(prevYear);
    this.maxDate = new Date();
    this.maxDate.setMonth(nextMonth);
    this.maxDate.setFullYear(nextYear);

    
    
    
}

onTodayClick() {
  let invalidDate = new Date();
  console.log(invalidDate)
}

}

html：

<div class="p-fluid p-grid p-formgrid">

  <div class="p-field p-col-12 p-md-4">
    <label for="buttonbar">Calendnar</label>
    <p-calendar [(ngModel)]="date9" [disabledDates]="invalidDate" selectionMode="range" showbuttonbar="true"
      inputId="buttonbar" (onTodayClick)="onTodayClick()"></p-calendar>
  </div>

理想情况下，我希望处理事件并禁用按钮。