在 ionic-calendar 2 中使用点击事件时遇到问题

Question

我正在尝试对 ionic-calendar 2 使用（单击）事件，如果用户单击已经过去的日期，它会禁用按钮，我的问题是，当我第一次单击过去的日期时，按钮是没有被禁用，但是我第二次按下它会禁用按钮，好像日历本身没有识别出有人在第一次点击时点击了不同的日期。

HTML

 <calendar (click)='passedDate()' [eventSource]='eventSource'
   [calendarMode]='calendar.mode'
   [currentDate]='calendar.currentDate'
   (onEventSelected)='onEventSelected($event)'
   (onTitleChanged)='onViewTitleChanged($event)'
   (onTimeSelected)='onTimeSelected($event)'
   step='30'
   class='calendar'>
  </calendar>

  <button ion-button (click)='appointments()' id="date" block [disabled]="block"> 
    Next
   </button>

打字稿

  eventSource =[];
  viewTitle: string;
  selectedDay =  new Date();
  block = false; //If user clicks on a date that has already passed this value turns true
  calendar = {
    mode: 'month',
    currentDate: ''


  }

  onViewTitleChanged(title){
    this.viewTitle = title;
  }

  onTimeSelected(ev){
   this.selectedDay = ev.selectedTime;
  }

  passedDate(){
    const date = new Date();

    if(this.selectedDay < date){
      this.block = true;
    }
    else { this.block = false;} 
  }

这是我第一次使用 ion-calendar 2，所以我不确定点击事件应该如何处理它，但我希望如果用户点击一个已经过去的日期，它会立即禁用该按钮。

Answer 1

你可以试试(click)=“passedDate()” (onCurrentDateChanged)="passedDate($event)".

像这样：

 <calendar [eventSource]="eventSource"
        [calendarMode]="calendar.mode"
        [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="passedDate($event)"
        (onRangeChanged)="reloadSource(startTime, endTime)"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        step="30">
</calendar>

在这样的打字稿中：

passedDate(selectedDate){
    const date = new Date();

    console.log(selectedDate);

    if(selectedDate < date){
      this.block = true;
    }
    else { this.block = false;} 
}

Stackblitz 与工作示例：https://stackblitz.com/edit/ionic-web9ga