如何仅显示月份，不包括日期和年份

Question

如何在Angular中创建“月日期选择器”，但不包括“年和年”？

以下链接将进行月份和年份选择器。我试图操纵它以仅“月”操作。如何配置？

Stackblitz：

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

结果应该是这样的，发出的值可以是例如May：a）5或b）5/1/2020。而且我可以在一天和一年后删除。

资源：Angular Material DatePicker: Month and Day, Exclude Year

Answer 1

您可以简单地在CSS的帮助下完成此操作。

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

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

这将隐藏您的按钮，并将按您的期望工作。

还需要在HTML中将日期选择器的startView选项更改为

我有分叉的here

<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。即使您愿意，也可以将该组件另存为共享组件，以便在需要时重用它。