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

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

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

введите здесь описание изображения

После выбора года вам будет предложено указать месяц, а затем выбрать дату. Из docs похоже, что у них есть year-picker, но - как имя описывает - позволяет выбрать только конкретный год, без возможности выбора месяца и даты. Вы знаете какие-нибудь обходные пути?


angular antd ng-zorro-antd
person Aaron Ullal    schedule 21.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, 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);
    }

}
person fbchen    schedule 23.05.2019