angular - 如何从 ngbdatepicker Angular 禁用现有日期

Question

我有数组现有数据。从 ngbdatepicker 中选取日期时如何禁用现有数据？

这是我过去的禁用代码

var current = new Date();
current.setDate(current.getDate());
this.minDates = {
                  year: current.getFullYear(),
                  month: current.getMonth() + 1,
                  day: current.getDate(),

                };

这是我现有日期数组的代码

var avDateArray = [];
 for(var i=0;i<this.tmpResponse[0].available_date.length;i++){
                  avDateArray.push(this.tmpResponse[0].available_date[i].start_date);
                }

我困惑的是如何以 Angular 禁用 ngbdatepicker 中现有日期数组中的日期？

Answer 1

只需创建一个包含禁用日期的数组

disabledDates:NgbDateStruct[]=[
    {year:2019,month:2,day:26}
  ]

并创建一个函数“isDisabled”

  isDisabled=(date:NgbDateStruct,current: {month: number,year:number})=> {
    //in current we have the month and the year actual
    return this.disabledDates.find(x=>new NgbDate(x.year,x.month,x.day).equals(date))?
         true:false;
  }

  //or briefly

  isDisabled=(date:NgbDateStruct,current: {month: number,year:number})=>
    this.disabledDates.find(x=>new NgbDate(x.year,x.month,x.day).equals(date))?true:false;

您的 ngb-datepicker 使用 [markDisabled]

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"
      [markDisabled]="isDisabled"></ngb-datepicker>

参见stackblitz