Блог

Доброе утро,

Недавно я обновил довольно старый проект Angular с ~ 6 до 10. После всех других частей, которые мне пришлось исправить, у меня остался только инструмент выбора даты материала, который я не могу снова запустить.

Короче говоря: это работает, оно появляется, я могу щелкнуть по месяцам и выбрать раскрывающийся список «Год», но я не могу щелкнуть что-либо в области основного содержимого (как даты, так и годы). Ну, я могу щелкнуть, но ничего не делает. Нет вывода на консоль.

Мой базовый компонент-оболочка datepicker:

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

Исправление, найденное этим замечательным человеком в моем сообщении на GitHub.

Кажется, 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>