angularangular-materialangular-material-datetimepicker

Angular Material 7 Datepicker: Disable multi year view

I'm using the MatDatepicker from @angular/material ^7.0.0-rc.0, and I made a little complex filter that compares every visible day in the timepicker with every day of an array with about 200 or 300 values. It breaks the aplication every time I switch the datepicker to multi-year view mode.

I just want to disable or disallow the multi-year view mode, and let only month mode and year mode working.

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>

My filter method:

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

I don't found anything on A. Material manual that can helps me. Hope anyone can!

Thanks a lot!

Solution

  • You can pass a customized component as the calendar header, this will allow you to override the button currently allowing the user to select multi year view.

    This example does not have the ability to select multi year.

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

    HTML

    reference the custom component on the mat-datepicker

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