angular - Angular Ant Design DatePicker 默认模式

Question

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

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

选择年份后，应提示您选择月份，最后选择日期。从文档看起来他们有一个year-picker，但是 - 正如名称所描述的 - 只允许选择特定的年份，而不能选择月份和日期。您知道任何解决方法吗？

Answer 1

是的，nz-date-picker有一个nzMode属性可以是'decade' | 'year' | 'month' | 'date' | 'time'. 在这种情况下，您可以更改nzModeon triggering (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);
    }

}