CODEWITHSUNDEEP
angulartypescriptdatepickerangular-material
Denis Steinman
Denis Steinman

Reputation: 7799

matDatepickerFilter breaks mat-datepicker

I need to disable some months and days in mat-datepicker but when I am trying to set [matDatepickerFilter] it breaks my mat-datepicker totally (see below).

Screenshot

HTML:

<mat-form-field>
  <mat-label>Reporting period</mat-label>
  <input matInput [matDatepicker]="periodDp" [matDatepickerFilter]="dateFilter" [(ngModel)]="filter.period">
  <mat-datepicker-toggle matSuffix [for]="periodDp"></mat-datepicker-toggle>
  <mat-datepicker #periodDp></mat-datepicker>
</mat-form-field>

TypeScript:

dateFilter = (date: Date) => date.getMonth() % 2 === 1 && date.getDate() % 2 === 0;

What's wrong? I have same situation with [dateClass] attribute, without the filter all works perfectly.

Upvotes: 0

Views: 1311

Answers (2)

Fabio Quintana
Fabio Quintana

Reputation: 1

myFilter = (d: any): boolean => {
    let fechaFormat = new Date(d);
    const day = (fechaFormat || new Date()).getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6 &&;
  }

Upvotes: 0

Faizal Hussain
Faizal Hussain

Reputation: 1581

You should return the filter with a boolean value like

     myFilter = (date: Date): boolean => {
  return date.getMonth() % 2 === 1 && date.getDate() % 2 === 0;
  }

here is a working demo

https://stackblitz.com/edit/angular-kvtat7?file=app/datepicker-filter-example.ts

Upvotes: 1

Related Questions