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

Question

我正在尝试寻找类似于下图的 angular 日期选择器：

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

Answer 1

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

你可以在link and stackblitzlink中引用Datepicker with custom calendar header来自Angular material datepicker

已根据您的要求修改stackblitz

您需要向 MatDatePicker

提供 header 模板

与 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 material datepicker

提供的原始 stackblitz

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

Angular Datepicker showing seperately month and year

datepicker

angular-material

angular