Угловой материал 7 Datepicker: отключить многолетнее представление - PullRequest
Новая
       13

Угловой материал 7 Datepicker: отключить многолетнее представление

0 голосов
/ 03 декабря 2018

Я использую MatDatepicker из @ angular / material ^ 7.0.0-rc.0, и я создал небольшой сложный фильтр, который сравнивает каждый видимый день в средстве выбора времени с каждым днем ​​массива с примерно 200 или 300 значениями.,Он нарушает работу приложения каждый раз, когда я переключаю средство выбора даты в многолетний режим просмотра.

Я просто хочу отключить или запретить многолетний режим просмотра и разрешить работу только месячного режима и годового режима.

HTML: 

<mat-form-field (click)="picker.open()" class="date-field">
    <span>{{(dataFields['mosaic_'+REPORT_STAGES.PLANTING]['value'] | date: 'dd/MM/yyyy') || 'Não plantou'}}</span>
    <input matInput hidden [matDatepicker]="picker" placeholder="" [(value)]="dataFields['mosaic_'+REPORT_STAGES.PLANTING]['value']" (dateChange)="plantingDateChange($event)" [matDatepickerFilter]="datePickerFilter.bind(this)">
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Мой метод фильтрации: 

datePickerFilter(d: Date): boolean {

  const dAsDate = this.datePipe.transform(d, 'dd-MM-yyyy');

  const validDates = this.allowedDays.filter(e => {
    const eAsDate = this.datePipe.transform(new Date(e), 'dd-MM-yyyy');
    return eAsDate === dAsDate;
  });

  console.log(validDates);

  return (validDates.length > 0);
}

Я не нашел ничего в A. Руководство по материалам, которое может мне помочь.Надеюсь, что кто-нибудь может!

Большое спасибо!

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете передать настраиваемый компонент в качестве заголовка календаря, это позволит вам переопределить кнопку, позволяющую пользователю выбрать многолетнее представление.

В этом примере нет возможности выбрать многолетнее представление.

https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header

HTML

ссылка на пользовательский компонент в mat-datepicker

<mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
...