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

Question

下面是我的日期范围组件 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>

对于[dateFilter]="rangeFilter"，我在我的组件中添加了以下功能：

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

我的 package.json 文件：

{
  "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"
  }
}

但是我得到的错误是：

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

我尽了一切可能。但是得到这个错误。需要您的宝贵建议。

Answer 1

如果要过滤出范围，那么结果必须是布尔值，而不是日期。您正在尝试 return 一个运行时间转换错误的日期：

尝试以下方法过滤掉未来 20 天内的天数：

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

这应该为日期选择器中显示的每个日期提供一个布尔值。 false 表示日期显示为灰色，true 表示日期可选择。

Answer 2

根据MatDateRangeInputdateFilter输入属性,

@Input()
dateFilter: DateFilterFn<D>

DateFilterFn

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

因此更改 rangeFilter 的方法签名如下：

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

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

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

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

typescript

angular-material

datefilter

angular-daterangepicker

angular