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

Question

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

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

闪电战：

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

结果应该是这样的，发出的值可以是例如 May：a) 5 或 b) 2020 年 5 月 1 日。我可以删除 Day 和 year later 。

资源：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',