时间戳

首页 > 解决方案 > 在 ionic-calendar 2 中使用点击事件时遇到问题

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

问题描述

我正在尝试对 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，所以我不确定点击事件应该如何处理它，但我希望如果用户点击一个已经过去的日期，它会立即禁用该按钮。

标签： htmltypescriptionic3

解决方案

推荐阅读