Angular Материал DatePicker: только месяц, исключая день и год

Question

Как создать средство выбора даты в месяце в Angular, исключая скрытие дня и года?

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

Stackblitz:

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

Результат должен быть примерно таким, значение выдается может быть для примера мая: а) 5 или б) 1.05.2020 И я могу удалить День и год спустя.

Ресурсы: Angular Материал DatePicker: месяц и день, исключая год

Answer 1

Вы можете просто сделать это с помощью css.

.mat-calendar-controls .mat-calendar-period-button {
  display: none;
}

mat-year-view .mat-calendar-body-label{
  display: none !important;
}

Это скроет вашу кнопку и будет работать в соответствии с вашими ожиданиями.

Также вам нужно изменить в вашем HTML для опции начала просмотра при выборе даты как

У меня есть форк этот стек здесь

<mat-datepicker #dp
              startView="year"
              (yearSelected)="chosenYearHandler($event)"
              (monthSelected)="chosenMonthHandler($event, dp)"
              panelClass="example-month-picker"></mat-datepicker>

Если вам нужно удалить 2020 из управления вводом, вы можете изменить форматы в файле компонента.

Чтобы изменить форматы месяца, просто измените здесь на dateInput

display: {
  dateInput: 'MM',

Answer 2

Вы должны создать пользовательский модал со всеми месяцами года и показывать их со скином, похожим на Angular Material Datepicker, чтобы добиться этого, вы можете изменить CSS в вашем компоненте. Даже если вы хотите, вы можете сохранить этот компонент как компонент общего доступа, чтобы использовать его всякий раз, когда вам это нужно.