早上好，
我最近将一个相当旧的 Angular 项目从 ~6 更新到了 10。在我必须修复它的所有其他部分之后，我只剩下无法再次工作的材料日期选择器。
简而言之：它有效，它出现了，我可以轻弹月份并点击年份下拉菜单，但主要内容区域内的任何内容，我都无法点击（日期和年份）。好吧，我可以点击，但什么也没做。没有控制台输出。
我的基本日期选择器包装组件：
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'date-picker-component',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
@Input() public disabled: boolean;
@Input() public placeholder: string;
@Input() public value: Date;
@Input() public minDate: Date;
@Input() public maxDate: Date;
@Input() public filter: Function;
@Output() public onSelect = new EventEmitter<Date>();
public onDateChange(date: Date): void {
this.onSelect.emit(date);
}
}
<mat-form-field fxFlexFill>
<input matInput
[value]="value"
[min]="minDate"
[max]="maxDate"
[matDatepicker]="picker"
[placeholder]="placeholder"
(dateChange)="onDateChange($event.value)"
(click)="picker.open()"
[matDatepickerFilter]="filter"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>
示例用法：
<date-picker-component
[disabled]="!availableDates || loading"
[minDate]="today"
[filter]="dateFilter()"
placeholder="Select trial date"
(onSelect)="onDateSelected($event)">
</date-picker-component>
打开选择器工作：
显示选择器：
疯狂地点击日期什么也没做：
显示年份选择：
疯狂地点击一年什么也没做：
月份切换工作正常：
最后的细节，相关的包：
"@angular/animations": "10.1.3",
"@angular/cdk": "10.2.2",
"@angular/common": "10.1.3",
"@angular/compiler": "10.1.3",
"@angular/core": "10.1.3",
"@angular/flex-layout": "10.0.0-beta.32",
"@angular/forms": "10.1.3",
"@angular/material": "10.2.2",
"@angular/platform-browser": "10.1.3",
"@angular/platform-browser-dynamic": "10.1.3",
"@angular/router": "10.1.3",
"buffer": "5.6.0",
"classlist.js": "1.1.20150312",
"core-js": "3.6.5",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"moment": "2.29.0",
"rxjs": "6.6.3",
"tslib": "2.0.0",
"web-animations-js": "2.3.2",
"zone.js": "0.10.3"
哦，我想也有用的是证明设置细节（在app.module.ts提供者中）：
{
provide: MAT_DATE_LOCALE,
useValue: 'en-GB'
}
并且还在某处或其他地方进口MatNativeDateModule......
编辑：发现最初的原因是过滤器。它不喜欢过滤器。取下过滤器，我可以再次选择日期和事物。没有多大帮助，但这是一个开始。过滤器正在工作 - 可以看到过滤日期，但不允许对其进行选择。
这是上面的过滤器：
public dateFilter(): (dt: Date) => boolean {
const fn = (dt: Date): boolean => {
const day = DateExtensions.toStringFormat(dt, 'dddd');
return ArrayExtensions.firstOrDefault(this._availableDates, x => x.day === day) != undefined;
};
return fn;
}