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

Question

如何在 Angular 中创建月份日期选择器，不包括隐藏日期和年份？

以下链接将执行月份和年份选择器。我试图操纵它只做一个月。如何配置？

堆栈闪电战：

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

结果应该是这样的，发出的值可以是示例 May：a) 5 或 b) 5/1/2020。我可以删除 Day 和 year 之后。

资源：Angular Material DatePicker：月份和日期，不包括年份

Answer 1

您可以在 css 的帮助下简单地做到这一点。

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

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

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

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

我在这里叉了这个stackblitz

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