Angular (10) material touchUi datepicker - 不能select 任何东西

Question

早上好，

我最近将一个相当旧的 Angular 项目从 ~6 更新到 10。在我必须修复它的所有其他部分之后，我只剩下 material 我无法再次工作的日期选择器。

简而言之：它有效，出现了，我可以轻拂月份并点击年份下拉菜单，但我不能点击主要内容区域内的任何内容（日期和年份）。好吧，我可以点击但什么都不做。没有控制台输出。

我的基本日期选择器包装器组件：

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>

打开选择器有效：

显示选择器：

疯狂地点击一个日期没有任何反应：

显示年份 selection:

疯狂点击年份没有任何反应：

月份切换正常：

关于最终细节，相关包：

    "@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...

编辑：发现最初的原因是过滤器。它不喜欢过滤器。取下过滤器，我可以 select 再次查看日期和内容。帮助不大，但这是一个开始。过滤器正在工作 - 可以看到过滤日期，但不允许 select离子。

这是上面的过滤器：

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

Answer 1

这个光荣的人在我的 GitHub post.

上找到的修复程序

似乎 Angular 11 不喜欢评估过滤器的原始方式：

public dateFilter(): (dt: Date) => boolean { ... }

<date-picker-component
    [filter]="dateFilter()"
    ...>
</date-picker-component>

相反，它现在很满意：

public dateFilter = (dt: Date): boolean => { ... }

<date-picker-component
    [filter]="dateFilter"
    ...>
</date-picker-component>

Angular (10) material touchUi datepicker - 不能select 任何东西

Angular (10) material touchUi datepicker - can't select anything

angular

typescript

datepicker

angular-material

angular-material-datetimepicker