最佳答案
好吧,我的另一个回答是错误的,让我们换一个方法。
假设我们有一个 CustomTemplate Header。因为我们希望它看起来像原始的 DatePicker header ,所以我们复制了 gitHub of angular 中的模板。 ,但我们正在更改上一个按钮旁边的功能,所以就像
<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>
现在我们定义了从 MatCalendarHeader 扩展的 customHeader
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
<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
关于angular - 如何捕捉 Material Datepicker 月份分页事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57510066/