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

Question

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

下面的 link 将做一个月份和年份选择器。我试图操纵它只做一个月。如何配置？

堆栈闪电战：

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

结果应该是这样的，发出的值可以是例如 5 月：a) 5 或 b) 5/1/2020。我可以在一年后删除日。

资源：

Answer 1

您应该创建一个包含一年中所有月份的自定义模式，并使用类似于 Angular Material Datepicker 的皮肤显示它们，为了实现这一点，您可以在组件中更改 CSS。即使您愿意，您也可以将此组件保存为共享组件，以便在需要时重复使用它。

Answer 2

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

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

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

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

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

我已经 fork 这个 stackblitz here

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

如果您需要从输入控件中删除 2020，您可以在组件文件中更改格式。

要更改月份格式，只需在此处更改 dateInput

display: {
  dateInput: 'MM',

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

How to display Month Only, Excluding Day and Year

angular

typescript

angular-material

angular8

angular-material-datetimepicker