title: mark-disabled ng-bootstrap not working with other datepickers examples
body: <p>I am trying to use the range selection and the global configuration from the ng-bootstrap datepicker <a href="https://ng-bootstrap.github.io/#/components/datepicker/examples" rel="nofollow noreferrer">example</a>. 
  But the config.mark-disabled doesn't seem to apply in my code:
  It's almost only code from the examples from the link above. 
  I changed the fromDate and toDate value to see if there was a conflict with the days that should be disabled, but it didn't help.</p>
  
  <h1>my .ts file :</h1>
  
  <pre><code>import { Booking } from '../booking/booking.model';
  import { BookingDataService } from '../booking-data.service';
  import { Component, OnInit } from '@angular/core';
  import {NgbDateStruct, NgbCalendar,NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
  import { AddBookingComponent } from '../add-booking/add-booking.component';
  import { EventEmitter } from '@angular/core/src/event_emitter';
  
  
  const equals = (one: NgbDateStruct, two: NgbDateStruct) =&gt;
  one &amp;&amp; two &amp;&amp; two.year === one.year &amp;&amp; two.month === one.month &amp;&amp; two.day === one.day;
  
  const before = (one: NgbDateStruct, two: NgbDateStruct) =&gt;
  !one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
    ? false : one.day &lt; two.day : one.month &lt; two.month : one.year &lt; two.year;
  
  const after = (one: NgbDateStruct, two: NgbDateStruct) =&gt;
  !one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
    ? false : one.day &gt; two.day : one.month &gt; two.month : one.year &gt; two.year;
  
  @Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.css'],
    providers: [NgbDatepickerConfig, BookingDataService]
  })
  export class CalendarComponent implements OnInit {
  
    private bookings : Booking[];
    hoveredDate: NgbDateStruct;
  
      fromDate: NgbDateStruct;
      toDate: NgbDateStruct;
      model;
  
      constructor(calendar: NgbCalendar, config : NgbDatepickerConfig, private _bookingDataService: BookingDataService) {
  
        this.fromDate = calendar.getToday();
        this.toDate = calendar.getNext(calendar.getToday(), 'd', 3);
  
        config.minDate = {year: calendar.getToday().year, month: calendar.getToday().month-1,day:calendar.getToday().day}
        config.maxDate = {year: 2099, month: 12, day: 31};
  
        config.outsideDays = 'hidden';
  
        config.markDisabled = (date: NgbDateStruct) =&gt; {
          const d = new Date(date.year, date.month - 1, date.day);
          return d.getDay() === 0 || d.getDay() === 6;
        }; // this function disables the weekends, but in my case it doesn't seem to work
  
      }
  
    //   isDisabled = (date: NgbDateStruct, current: {month: number}) =&gt; {
    //     const d = new Date(date.year, date.month - 1, date.day);
    //     return this.isBookedDate(); // this is undefined
    // }
    //   isBookedDate() : Date[]{
    //     return null;
    //     // return this._bookingDataService.bookings.filter(obj =&gt; obj.date&lt; caledar.getToday())
    //   }
  
      onDateChange(date: NgbDateStruct) {
        if (!this.fromDate &amp;&amp; !this.toDate) {
          this.fromDate = date;
        } else if (this.fromDate &amp;&amp; !this.toDate &amp;&amp; after(date, this.fromDate)) {
          this.toDate = date;
        } else {
          this.toDate = null;
          this.fromDate = date;
        }
      }
  
      isHovered = date =&gt; this.fromDate &amp;&amp; !this.toDate &amp;&amp; this.hoveredDate &amp;&amp; after(date, this.fromDate) &amp;&amp; before(date, this.hoveredDate);
      isInside = date =&gt; after(date, this.fromDate) &amp;&amp; before(date, this.toDate);
      isFrom = date =&gt; equals(date, this.fromDate);
      isTo = date =&gt; equals(date, this.toDate);
  
    ngOnInit() {
  
    }
  
    bookNow(fromDate: Date, toDate : Date) : boolean {
       return true;
    }
  
    display(vid:AddBookingComponent){
  
    }
  
  }
  </code></pre>
  
  <h1>my html:</h1>
  
  <pre><code>&lt;ngb-datepicker #dp ngModel [(ngModel)]="model" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t"&gt;
  &lt;/ngb-datepicker&gt;
  
  &lt;ng-template #t let-date="date" let-focused="focused"&gt;
    &lt;span class="custom-day"
          [class.focused]="focused"
          [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
          [class.faded]="isHovered(date) || isInside(date)"
          (mouseenter)="hoveredDate = date"
          (mouseleave)="hoveredDate = null"&gt;
      {{ date.day }}
    &lt;/span&gt;
  &lt;/ng-template&gt;
  
  &lt;hr&gt;
  
  &lt;div&gt;
    &lt;pre&gt;From night: {{ fromDate.day}}/{{fromDate.month}}/{{fromDate.year}} &lt;/pre&gt;
    &lt;pre&gt;To night: {{ toDate.day}}/{{toDate.month}}/{{toDate.year}} included&lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;button class="btn btn-success" (click)="bookNow('fromDate','toDate')" (click)="display('AddBookingComponent')" &gt;Book now&lt;/button&gt;
  &lt;!-- &lt;app-add-booking&gt;&lt;/app-add-booking&gt; --&gt;
  </code></pre>
  
  <p>The combination of the two examples seems not to work.
  Any help is much appreciated.</p>