时间戳

首页 > 解决方案 > Angular Datepicker 分别显示月份和年份

angular - Angular Datepicker 分别显示月份和年份

问题描述

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

1

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

标签： angulardatepickerangular-material

解决方案

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

您可以Datepicker with custom calendar header在此链接中参考Angular 材料日期选择器中的stackblitz链接

根据您的要求修改stackblitz

您需要向MatDatePicker

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

标头模板.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

推荐阅读