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!
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')
];
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 ifmodeisday, 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'}
];
}