Angular Ant Design DatePicker режим по умолчанию

Question

Я использую библиотеку Ant Design for Angular, и мне интересно, можно ли использовать компонент datepicker, задающий режим по умолчанию для представления календаря.

В частности, я хотел бы открыть свой указатель датыв режиме «год», как показано на следующем снимке экрана

После выбора года вам будет предложено указать месяц и, наконец, дату.Из документов похоже, что у них есть 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);
    }

}