ngbdatepicker 动态禁用日期对象

Question

我正在尝试仅禁用用户选择的日期。经过多次试验，我能够这样做，但它禁用了所有日历。我希望它仅禁用选定的日期。

ng-bootstrap 上的当前资料，仅将天禁用为数字，而不是对象：

https://ng-bootstrap.github.io/#/components/datepicker/overview

打字稿代码：

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
import { stringify } from '@angular/compiler/src/util';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
export class NgbdDatepickerRange {    

  hoveredDate: NgbDate;
  fromDate: NgbDate;
  toDate: NgbDate;
  DiffDate:number;
  startDate;
  endDate;

 disabeledDays: NgbDate [] = new Array(); //this is array of date objects, which i want to disable



  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 1);      
    this.DiffDate=this.calcDaysDiff();     
  }

 isDisabled = (date: NgbDate) => {
    for (var i =0; i < this.disabeledDays.length;i++){
      date= this.disabeledDays[i]; 
      console.log(date);   
    } return date;
  } //this is function for disabling the dates

 onDateSelection(date: NgbDate) {
    console.log('onDateSelection:', date);
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
      this.DiffDate = this.calcDaysDiff();
      this.FromDateEvent.emit(date);


    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      this.DiffDate = this.calcDaysDiff();
      this.EndDateEvent.emit(date);


    } else {
      this.toDate = null;
      this.fromDate = date;

      this.FromDateEvent.emit(date);

      this.disabeledDays.push(date); //pushing a date to the array of disabled dates
    }
  }

}

HTML:

ngb-datepicker [markDisabled]="isDisabled" #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden"
>
</ngb-datepicker>



<ng-template #t let-date let-focused="focused" class="container">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

有什么建议吗？

Answer 1

您需要对 isDisabled 属性进行一些更改。简而言之，您应该 return 一个布尔值（true 或 false），而不是原始代码中所述的 NgbDate 日期对象。 .from() 实际上是 NgbDate API 的一部分，它从 NgbDateStruct.

创建一个新的日期对象

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

disabledDates 表示 NgbDate 对象的数组，这些对象将在日期选择器本身上被禁用。

disabledDates: NgbDateStruct[] = [ 
  {year: 2019, month:4, day:10},
  {year: 2019, month:4, day:12},
  {year: 2019, month:4, day:14},
];

这是一个 demo，请查看它以了解其工作原理。

ngbdatepicker 动态禁用日期对象

ngbdatepicker disable dates objects dynamically

angular

ngb-datepicker