1

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

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>

有什么建议么？

4

1 回答 1

2

您将需要对您的isDisabled财产进行一些更改。简而言之，您应该返回一个布尔值（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},
];

这是一个演示，请检查它以了解它是如何工作的。

于 2019-04-25T18:41:37.867 回答