在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