Disabling specific dates in Angular Material's [matDatepicker]

Question

I am attempting to create an appointment booking application, and I am working on disabling certain dates. I have discovered a solution using the "matDatepickerFilter" feature. However, I am encountering an error when implementing it into my application. Specifically, the error message reads "Type MatDatepicker is not assignable to type MatDatepickerPanel<MatDatepickerControl, Date | null, Date>" and "Property matDatepickerFilter is not provided by any applicable directives nor by mat-datepicker element". I need help in resolving this issue.

My html code:

<div class="paneContainer">
  <div class="matdatepicker">
    <mat-form-field appearance="fill">
      <mat-label>Choose Date!</mat-label>
      <input matInput [matDatepicker]="picker" [matDatepickerFilter]="myHolidayFilter" min="{{currentDate | date:'yyyy-MM-dd'}}" [(ngModel)]="selectedMatDate" >
      <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>

  </div>
</div>

My ts code:

import {Component, LOCALE_ID} from '@angular/core';
import {MAT_DATE_FORMATS} from "@angular/material/core";
import { DatePipe } from '@angular/common';

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
    DatePipe]
})

export class DatePickerComponent {
  currentDate: any = new Date();
  selectedMatDate!: Date;

  myHolidayDates = [
    new Date("25/3/2023"),
    new Date("12/20/2020"),
    new Date("12/17/2020"),
    new Date("12/25/2020"),
    new Date("12/4/2020"),
    new Date("12/7/2020"),
    new Date("12/12/2020"),
    new Date("12/11/2020"),
    new Date("12/26/2020"),
    new Date("12/25/2020")
  ];

  myHolidayFilter = (d: Date): boolean => {
    const time=d.getTime();
    return !this.myHolidayDates.find(x=>x.getTime()==time);
  }

}

These are my imports:

 imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    MomentDateModule,
    MatNativeDateModule
  ],

I updated my cli and angular material to the latest version.

Answer 1

I figured it out. The problem was in my ts file. I had to change Date to any.

myHolidayFilter = (d: any): boolean => {
const time=d.getTime();
return !this.myHolidayDates.find(x=>x.getTime()==time);

}

}