Date Picker from Ng2 Bootstrap keep throwing error on unable to read getFullYear()

Question

I was having some problem when trying to disable dates using date picker from ng2-bootstrap. In my app.module.ts, I imported the library as such:

import {DatepickerModule} from 'ng2-bootstrap';
@NgModule({
imports: [

    DatepickerModule.forRoot()
],

In my html:

<div class="col-sm-6 form-group has-feedback" [ngClass]="displayFeedBackCss('testDte')">
        <label for="testDte">TEST DATE<span class="text-danger">*</span></label>
        <datepicker
            [(ngModel)]="testDte"
            [showWeeks]="true"
            [minDate]="minDate"
            [dateDisabled]="disabledDate"
            [onlyCurrentMonth]=true
        ></datepicker>
    </div>

In my ts file:

disabledDate:any;
date:Date;

ngOnInit(): void {
this.date = new Date();
this.disabledDate = [
  {dt: this.date.getDate()-1, mode: 'day'},
  {dt: this.date.getDate()-2, mode: 'day'}
];
}

However, I kept getting this error message in console:

EXCEPTION: Error in ./e class e - inline template:25:6 caused by: Cannot read properties of undefined (reading 'getFullYear')
e.handleError @ vendor.2b9f55e0bbcf755a8964.js:30
vendor.2b9f55e0bbcf755a8964.js:30 ORIGINAL EXCEPTION: Cannot read properties of undefined (reading 'getFullYear')

I even tried to hardcode the dates as '2021-12-16' and '16/12/2021'. However, same error message keep showing still. Any ideas?

Thanks!

Answer 1

Please note that ng2-bootstrap has been deprecated. I suggest moving to ngx-bootstrap

install ngx-bootstrap --save

And refer The Fabio's answer.

The below is for older version.

The dateDisabled option takes

dateDisabled (?Array<{date:Date, mode:string}>) - array of disabled dates if mode is day, or years, etc.

ngOnInit(): void {
    this.date = new Date();
    let disabledStartDate = new Date();
    disabledStartDate.setDate(this.date.getDate()-1);
    let disabledEndDate = new Date();
    disabledEndDate.setDate(this.date.getDate()-2);
    this.disabledDate = [
        {date:disabledStartDate , mode: 'day'},
        {date:disabledEndDate , mode: 'day'}
    ];
}