title: ngbdatepicker disable dates objects dynamically
body: <p>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.</p>
  
  <p>Current materials on ng-bootstrap, only disable days as numbers, not objects:</p>
  
  <p><a href="https://ng-bootstrap.github.io/#/components/datepicker/overview" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/datepicker/overview</a></p>
  
  <p>Typescript code:</p>
  
  <pre><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) =&gt; {
      for (var i =0; i &lt; 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 &amp;&amp; !this.toDate) {
        this.fromDate = date;
        this.DiffDate = this.calcDaysDiff();
        this.FromDateEvent.emit(date);
  
  
      } else if (this.fromDate &amp;&amp; !this.toDate &amp;&amp; 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"
  &gt;
  &lt;/ngb-datepicker&gt;
  
  
  
  &lt;ng-template #t let-date let-focused="focused" class="container"&gt;
    &lt;span class="custom-day"
          [class.focused]="focused"
          [class.range]="isRange(date)"
          [class.faded]="isHovered(date) || isInside(date)"
          (mouseenter)="hoveredDate = date"
          (mouseleave)="hoveredDate = null"&gt;
      {{ date.day }}
    &lt;/span&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Any suggestions?</p>