Angular Material Date Range date filter get '(date: Date) => boolean' is not assignable to type 'DateFilterFn' error

Question

Below is My Date Range Component HTML:

<mat-form-field appearance="fill" class="fields-full-width">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input
      [rangePicker]="picker"
      [dateFilter]="rangeFilter"
      formGroupName="dateRange"
    >
      <input
        matStartDate
        placeholder="Start date"
        formControlName="start"
        autocomplete="off"
      />
      <input
        matEndDate
        placeholder="End date"
        formControlName="end"
        autocomplete="off"
      />
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

For [dateFilter]="rangeFilter" I have added below function in my component:

rangeFilter(date: Date): boolean {
    return date.getDate() > 20;
}

My package.json file:

{
  "name": "front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.6",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.6",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.6",
    "@angular/cli": "~12.2.6",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

But the error I am getting:

(date: Date) => boolean' is not assignable to type 'DateFilterFn

I tried my all possible way. But getting this error. Your valuable suggestion is needed.

score 2 · Accepted Answer · answered Sep 25 '21 at 03:51

2

According to MatDateRangeInput dateFilter Input property,

@Input()
dateFilter: DateFilterFn<D>

DateFilterFn

type DateFilterFn = (date: D | null) => boolean;

Hence change the rangeFilter's method signature as below:

import { DateFilterFn } from '@angular/material/datepicker';

rangeFilter: DateFilterFn<Date> = (date: Date | null) => {
  // Implementation
  return date?.getDate() > 20;
};

answered Sep 25 '21 at 03:51

Yong Shun

35,286
4
24
46

1

``` rangeFilter: DateFilterFn = (date: Date | null): boolean => { const dateNumber = date?.getDate(); const dateMonth = date?.getMonth(); const dateYear = date?.getFullYear(); const actualMonth = dateMonth ? dateMonth + 1 : dateMonth; const actualDate = `${dateYear}-${actualMonth}-${dateNumber}`; const formattedDate = format(new Date(actualDate), 'yyyy-MM-dd'); const checkValid = this.availableDates.find( (dateItem) => dateItem.date == formattedDate ); if (!checkValid) { return false; } return true; }; ``` – shaikh Sep 25 '21 at 10:05
1

The above code is working for me. – shaikh Sep 25 '21 at 10:06

Andrew Halil · Answer 2 · 2021-09-25T01:54:04.897

If you want to filter out the range, then the result must be a boolean, not a date. You are trying to return a date which is a run-time casting error:

Try the following to filter out days within the next 20 days:

rangeFilter(date: Date): boolean {
    let currentDate: Date = new Date();
    let includeDatesWithinNextTwentyDays: boolean = date.valueOf() < (currentDate.valueOf() + 20*60*60*1000*24);
    return includeDatesWithinNextTwentyDays;
}

This should give you a boolean value for each date displayed within date picker. A false means the date is greyed out, a true means the date is selectable.

Angular Material Date Range date filter get '(date: Date) => boolean' is not assignable to type 'DateFilterFn' error

2 Answers2

Linked