如何从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);
                }

我混淆的是如何从ngbdatepicker中的existingdates数组中禁用角度？

Answer 1

禁用和限制日期

您可以使用[minDate]和[maxDate]输入限制可用于导航和选择的日期。如果您未指定其中任何一个，您将拥有无限导航，年份选择框将显示当前可见月份的[ - 10，+ 10]年。

如果要禁用某些选择日期（例如周末），则必须提供[markDisabled]功能，该功能将标记某些日期不可选。当您在月份之间导航时，将在每个新的可见日期调用它。

// disable the 13th of each month
const isDisabled = (date: NgbDate, current: {month: number}) => day.date === 13;
<ngb-datepicker [minDate]="{year: 2010, month: 1, day: 1}"
                [maxDate]="{year: 2048, month: 12, day: 31}"
                [markDisabled]="isDisabled">
</ngb-datepicker>

请参阅以下链接：Mark-disabled-ng-bootstrap

ng-bootstrap

Answer 2

只需创建一个具有禁用日期的数组

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

Answer 3

你想禁用过去的日期吗？你可以这样做：

在你的component.ts上

minDate = undefined;
.
. 
constructor(private config: NgbDatepickerConfig) {
  const current = new Date();
  this.minDate = {
    year: current.getFullYear(),
    month: current.getMonth() + 1,
    day: current.getDate()
  };

}
.
.
markDisabled(date: NgbDateStruct) {
  const d = new Date(date.year, date.month - 1, date.day);
  return d.getDate()===this.disabledDate.getDate() && d.getMonth()===this.disabledDate.getMonth && d.getYear()===this.disabledDate.getYear()
  })
}

并在您的component.html上，使用[minDate]输入绑定来禁用过去的日期，并使用[markDisabled]输入绑定来禁用动态日期列表

<input class="form-control" ngbDatepicker [minDate]="minDate"  [markDisabled]="markDisabled" (click)="datePicker.toggle()" #datePicker="ngbDatepicker" placeholder="yyyy-mm-dd">