如何捕捉 Material Datepicker 月份分页事件? [英] How can I catch the Material Datepicker month pagination event?

问题描述

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

在 Material Datepicker 中单击左"和右"月份选择框时会触发哪些事件?

解决方案

好吧，我的另一个回答是错误的，我们换一个方法.假设我们有一个 CustomTemplate Header.由于我们希望它看起来像原始的 DatePicker 标头，因此我们复制了 angular 的 gitHub，但是我们在上一个按钮的 next 中更改了功能，所以就像

<div class="mat-calendar-controls"><button mat-button type="button" class="mat-calendar-period-button"(click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"cdkAriaLive="礼貌">{{periodButtonText}}<div class="mat-calendar-arrow"[class.mat-calendar-invert]="calendar.currentView != 'month'"></div><div class="mat-calendar-spacer"></div><ng-content></ng-content><!--看到我们通过customPrev改变了previousClicked--><button mat-icon-button type="button" class="mat-calendar-previous-button"[禁用]="!previousEnabled()"(点击)="customPrev()"[attr.aria-label]="prevButtonLabel"><!--看到我们通过customNext改变nextClicked--><button mat-icon-button type="button" class="mat-calendar-next-button"[禁用]="!nextEnabled()"(点击)="customNext()"[attr.aria-label]="nextButtonLabel">

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

export class ExampleHeader extends MatCalendarHeader;{/** 处理用户对句点标签的点击.*/currentPeriodClicked(): void {this.calendar.currentView = this.calendar.currentView == '月' ?'多年':'月'；}/** 处理用户点击上一个按钮.*/customPrev(): void {console.log(this.calendar.activeDate)this.previousClicked()}/** 处理用户点击下一个按钮.*/customNext(): void {console.log(this.calendar.activeDate)this.nextClicked()}

然后，只说使用这个 ExampleHeader

<mat-label>自定义日历标题</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

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?

解决方案

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>  

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()
  }

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>

See in stackblitz

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