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  [ngClass]="displayFeedBackCss('testDte')">
        <label for="testDte">TEST DATE<span >*</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!

CodePudding user response：

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')
  ];

CodePudding user response：

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