Angular Datepicker 分别显示月份和年份答案

【问题标题】：Angular Datepicker showing seperately month and yearAngular Datepicker 分别显示月份和年份
【发布时间】：2020-09-14 09:31:55
【问题描述】：

我正在尝试找到一个如下图所示的角度日期选择器：

有谁知道任何与此类似的日期选择器，或者我是否可以使用 Angular Material Datepicker 创建类似于所附图像的东西？

【问题讨论】：

您好，这个答案对您有帮助吗？

标签： angular datepicker angular-material

【解决方案1】：

是的，您可以使用 Angular Material Datepicker 创建类似于所附图像的内容。

您可以在 Angular 材料日期选择器的 link 和 stackblitz 链接中引用 Datepicker with custom calendar header

根据您的要求修改stackblitz

您需要向MatDatePicker提供标头模板

与 angular material 提供的原始 stackblitz 相比，我所做的主要更改

header-template.html

<div class="example-header">
    <span class="example-header-label">{{monthLabel}}</span>
    <button mat-icon-button (click)="previousClicked('month')">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>
    <button mat-icon-button (click)="nextClicked('month')">
        <mat-icon>keyboard_arrow_right</mat-icon>
      </button>
    <span class="example-header-label">{{yearLabel}}</span>
    <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>
    <button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
        <mat-icon>keyboard_arrow_right</mat-icon>
      </button>
</div>

datepicker-custom-header-example.ts

get monthLabel() {
  return this._dateAdapter
    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
    .toLocaleUpperCase().split(" ")[0];
}

get yearLabel() {
  return this._dateAdapter
    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).split(" ")[1];
}

你可以玩 Angular 材料 datepicker 提供的原始 stackblitz

【讨论】：

@IraklisAnastasiou 很高兴听到它对您有所帮助；）