Below is My Date Range Component Html

    <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 is

{
  "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 is '(date: Date) => boolean' is not assignable to type 'DateFilterFn'

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

CodePudding user response：

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.

CodePudding user response：

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;
};