Error when trying to filter weekends Angular 16 with mat-datepicker

Question

I'm trying to filter the weekends like this in html:

<mat-form-field>
          <mat-label>01/01/2000</mat-label>
          <input matInput [matDatepickerFilter]="weekendsDatesFilter"  formControlName="deliveryDate"  [matDatepicker]="picker">

          <mat-hint>MM/DD/YYYY</mat-hint>
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

and this in ts:

weekendsDatesFilter = (d: Date): boolean => {
    const day = d.getDay();

    /* Prevent Saturday and Sunday for select. */
    return day !== 0 && day !== 6 ;
  }

But i get this error

According to the [docs](https://material.angular.io/components/datepicker/api#DateFilterFn), the date filter function needs to have type `(date: D | null) => boolean`, in your function the date cannot be null. This is why TypeScript throws an error. — JSON Derulo, Aug 07 '23 at 06:37
Does this answer your question? [Angular Material Date Range date filter get '(date: Date) => boolean' is not assignable to type 'DateFilterFn' error](https://stackoverflow.com/questions/69322172/angular-material-date-range-date-filter-get-date-date-boolean-is-not-ass) — Youp Bernoulli, Aug 07 '23 at 10:08

score 0 · Answer 1 · answered Aug 07 '23 at 10:07

As @JSON Derulo already stated... your method has a mismatched signature. It should be:

weekendsDatesFilter = (d: Date | null): boolean => {
    if(d === null){
      return false;
    }

    const day = d.getDay();

    /* Prevent Saturday and Sunday for select. */
    return day !== 0 && day !== 6 ;
  }

Error when trying to filter weekends Angular 16 with mat-datepicker

1 Answers1