Ionic2日历阻止日期已经过去

时间:2019-08-25 07:45:45

标签: html typescript ionic3

我制作了一个应用程序,用户可以使用ionic2日历预订清洁服务的约会。我要这样做,以便如果日期已过,用户将无法继续进行操作。

我使用(onCurrentDateChanged)传递所选日期,如果所选日期小于当前日期,则布尔值更改为true,否则为false。一切正常,直到第二天我检查了我的应用程序,它允许将当前日期前1天计算为true,就好像我用于当前日期的值没有更新并且仍然停留在前一个日期一样。

HTML


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


  <button ion-button (click)='appointments()' *ngIf='!block' id="date" block> 
    Next <ion-icon name='arrow'></ion-icon>
   </button>

   <button ion-button color = 'danger' (click)='invalid()' *ngIf = 'block' id="date"> 
      Cannot book on this Date
     </button>

TS

 passedDate(selectedDate){

    let date = new Date();

    console.log(date);

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

  appointments(){ //Function that takes user to a page with a list of appointments for his selected day.
    //alert(this.selectedDay +'<br/>' + this.date);
    this.navCtrl.push(ChooseAppPage, {D: this.selectedDay});
  }

  invalid(){
    let alrt = this.alrtCtrl.create({
      title:'Not avaialable',
      subTitle: 'Cannot choose this date because it has already passed',
      buttons: ['OK']
    });
    alrt.present();
  }

如果所选日期已过,则不应显示下一个按钮,例如,如果今天的日期是25/8/2019,则单击24/8/2019将显示不应发生的下一个按钮。

0 个答案:

没有答案