如何捕捉“重大数据选择器"月份分页事件? [英] How can I catch the Material Datepicker month pagination event?

问题描述

我想捕捉来自左"和右"选择按钮月份的事件，但是我找不到关于它的任何文档.

I would like to catch the event that comes from the month "left" and "right" selection buttons, but I couldn't find any documentation about it.

在物料日期选择器"中单击左"和右"月份选择框会引发什么事件?

What events are fired when the "left" and "right" month selection boxes are clicked in the Material Datepicker?

推荐答案

好吧，我的另一种回答是错误的，让我们再进行一次批评. 假设我们有一个CustomTemplate标头.因为我们希望它看起来像原始的DatePicker标头，所以我们正在复制

Well, my another response is wrong, Let's go to take another aproach. Imagine we has a CustomTemplate Header. As we want that it's looks like the original DatePicker header we are copy the template of this that is in gitHub of angular, but we are change the functions in button next an prev, so it's like

<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <button mat-button type="button" class="mat-calendar-period-button"
            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
            cdkAriaLive="polite">
      {{periodButtonText}}
      <div class="mat-calendar-arrow"
           [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
    </button>

    <div class="mat-calendar-spacer"></div>

    <ng-content></ng-content>

                <!--see that we change previousClicked by customPrev-->
    <button mat-icon-button type="button" class="mat-calendar-previous-button"
            [disabled]="!previousEnabled()" (click)="customPrev()"
            [attr.aria-label]="prevButtonLabel">
    </button>

                <!--see that we change nextClicked by customNext-->
    <button mat-icon-button type="button" class="mat-calendar-next-button"
            [disabled]="!nextEnabled()" (click)="customNext()"
            [attr.aria-label]="nextButtonLabel">
    </button>
  </div>
</div>  

现在，我们定义了customHeader，它是从MatCalendarHeader扩展的

Now we defined our customHeader extends from MatCalendarHeader

export class ExampleHeader extends MatCalendarHeader<any> {

  /** Handles user clicks on the period label. */
  currentPeriodClicked(): void {
    this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';
  }

  /** Handles user clicks on the previous button. */
  customPrev(): void {
    console.log(this.calendar.activeDate)
    this.previousClicked()
  }

  /** Handles user clicks on the next button. */
  customNext(): void {
    console.log(this.calendar.activeDate)
    this.nextClicked()
  }

然后，只说使用此ExampleHeader

Then , just only say that use this ExampleHeader

<mat-form-field>
  <mat-label>Custom calendar header</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
</mat-form-field>

请参见 stackblitz

这篇关于如何捕捉“重大数据选择器"月份分页事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！