Bdtjtk

I'm using Angular Bootstrap to create a date range picker and although the code is exactly what's in their example, I get several errors, all stating "TypeError: Cannot read property 'equals' of undefined".

This is the code I have: https://stackblitz.com/angular/ggxrvppdjeq

The only real difference is that I'm importing NgbDate from another folder:
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';

If I try to do it from @ng-bootstrap/ng-bootstrap as the example had, I get an error in VSCode: node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member. Switching it to what I have above makes the error go away... but perhaps this is causing the issue?

Template:

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

</ngb-datepicker>



<ng-template #t let-date let-focused="focused">

  <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>



<hr>



<pre>From: {{ fromDate | json }} </pre>

<pre>To: {{ toDate | json }} </pre>

Component:

import { Component, OnInit } from '@angular/core';

import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';



@Component({

  selector: 'ngbd-datepicker-range',

  templateUrl: './datepicker-range.html',

  styles: [`

    .custom-day {

      text-align: center;

      padding: 0.185rem 0.25rem;

      display: inline-block;

      height: 2rem;

      width: 2rem;

    }

    .custom-day.focused {

      background-color: #e6e6e6;

    }

    .custom-day.range, .custom-day:hover {

      background-color: rgb(2, 117, 216);

      color: white;

    }

    .custom-day.faded {

      background-color: rgba(2, 117, 216, 0.5);

    }

  `]

})

export class NgbdDatepickerRange {



  hoveredDate: NgbDate;



  fromDate: NgbDate;

  toDate: NgbDate;



  constructor(calendar: NgbCalendar) {

    this.fromDate = calendar.getToday();

    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);

  }



  onDateSelection(date: NgbDate) {

    if (!this.fromDate && !this.toDate) {

      this.fromDate = date;

    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {

      this.toDate = date;

    } else {

      this.toDate = null;

      this.fromDate = date;

    }

  }



  isHovered(date: NgbDate) {

    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);

  }



  isInside(date: NgbDate) {

    return date.after(this.fromDate) && date.before(this.toDate);

  }



  isRange(date: NgbDate) {

    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);

  }

}

I was able to implement this successfully in an outside project but when I inserted into this existing project I'm having issues. Any help would be much appreciated, I can't figure it out.