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

user_4257073 0
Viewed 173

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!

ngx-bootstrap angular datepicker
2 Answers

It seems the issue is that the datesDisabled configuration needs to be an array of Dates according to the docs. And you seem to have used dateDisabled (missing 's')

so your template code should be changed with

       <datepicker
            [(ngModel)]="testDte"
            [showWeeks]="true"
            [minDate]="minDate"
HERE >>>>   [datesDisabled]="disabledDate"
            [onlyCurrentMonth]=true
        ></datepicker>

and your component code also need to be adjusted as per docs so what is passed into the datesDisabled configuration can be correctly interpreted.

example from the docs:

  disabledDates = [
    new Date('2020-02-05'),
    new Date('2020-02-09')
  ];
user_46046450

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'}
    ];
}
user_48264570
Related