角日期选择器分别显示月份和年份

Question

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

有人知道与此相似的任何日期选择器吗？或者我是否可以使用Angular Material Datepicker创建类似于附件的图像？

Answer 1

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

您可以从Angular材质datepicker的link和stackblitz链接中引用Datepicker with custom calendar header

根据您的要求修改了stackblitz

您需要为MatDatePicker

提供标头模板

与有角度的材料提供的原始堆叠闪电战相比，我进行了主要更改

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