ngbdatepicker disable dates objects dynamically

I am trying to disable only selected dates by the user. After multiple trials, I was able to do so, but it is disabling all the calendar. I want it to disable only the selected days.

Current materials on ng-bootstrap, only disable days as numbers, not objects:

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

Typescript code:

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>

Any suggestions?

Solution

You will need to make some changes to your isDisabled property. In short, you are supposed to return a boolean value (true or false), rather than the NgbDate date object as stated on your original code. .from() is actually part of the NgbDate API, and it creates a new date object from the NgbDateStruct.

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

disabledDates represents the array of NgbDate objects which are meant to be disabled on the datepicker itself.

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

Here is a demo, do check it out to see how it works.