2

我有数组现有数据。从 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 中的现有日期数组中禁用日期？

4

3 回答 3

3

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

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

于 2019-02-26T08:04:44.203 回答
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

于 2019-02-26T05:51:17.813 回答
0

您是否要禁用过去的日期？你可以这样做：

在您的 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">
于 2019-02-26T04:54:07.543 回答