Angular Ant Design DatePicker默认模式

Question

我正在使用Ant Design for Angular库，并且想知道是否可以使用datepicker组件为日历视图指定默认模式。

具体来说，我希望我的日期选择器以“年”模式打开，如以下屏幕截图所示

选择年份后，系统会提示您选择月份，而不是最后选择日期。 从docs看来，他们有一个year-picker，但是-顾名思义-仅允许选择特定的年份，而没有选择月份和日期的可能性。您知道有什么解决方法吗？

Answer 1

是的，nz-date-picker具有nzMode属性，可以是'decade' | 'year' | 'month' | 'date' | 'time'之一。在这种情况下，您可以在触发nzMode时更改(nzOnPanelChange)。

我写了下面的代码来满足您的情况：

import { Component } from '@angular/core';

@Component({
    selector: 'nz-demo-date-picker-mode',
    template: `
    <nz-date-picker
      [nzMode]="mode"
      [(ngModel)]="value"
      (nzOnOpenChange)="handleDateOpenChange($event)"
      (nzOnPanelChange)="handleDatePanelChange($event)"
    >
    </nz-date-picker>
  `
})
export class NzDemoDatePickerModeComponent {
    public value: Date;
    public mode = 'year';

    handleDateOpenChange(open: boolean): void {
        if (!open && this.mode === 'date') {
            this.mode = 'year'; // back to year
        }
    }

    handleDatePanelChange(mode: string): void {
        switch (this.mode) {
            case 'year':
                this.mode = 'month'; // next to pick month
                break;
            case 'month':
                this.mode = 'date'; // next to pick date
                break;
            default:
                break;
        }
        console.log('handleDatePanelChange: ', this.mode);
    }

}