Выбор даты углового материала отключить выбор года

Question

Я пытаюсь отключить выбор года в средстве выбора даты для углового материала.

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

import {NativeDateAdapter} из '@ angular / material';

export class AppDateAdapter extends NativeDateAdapter {
  months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ];

  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = this.months[date.getMonth()]; // date.getMonth() + 1;
      const year = date.getFullYear();
      let days: any;
      if (day <= 9) {
        days = '0' + day;
      } else {
        days = day;
      }
      return `${days}` + '-' + `${month}` + '-' + `${year}`;
    }
    return date.toDateString();
  }
}

Answer 1

Из документов угловых материалов;

Как и в случае любого стандартного <input>, можно отключить ввод средства выбора даты, добавив свойство disabled.По умолчанию <mat-datepicker> и <mat-datepicker-toggle> будут наследовать свое отключенное состояние от <input>, но это можно переопределить, установив свойство disabled на элементе datepicker или toggle.Это может быть полезно, если вы хотите отключить ввод текста, но разрешить выбор с помощью календаря или наоборот.

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
    <mat-datepicker #dp2></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</p>

для получения дополнительной информации см .:

https://material.angular.io/components/datepicker/overview