From b567539ff3c54be6cff4db21f613122a2c26fc49 Mon Sep 17 00:00:00 2001 From: Wenqi <1264578441@qq.com> Date: Wed, 18 Mar 2020 17:57:17 +0800 Subject: [PATCH] refactor(module:date-picker): use directive instead of extends class (#4898) * refactor(module:date-picker): use directive instead of extends class build: fix build * build: fix build fix: build error --- .../date-picker/abstract-picker.component.ts | 313 ----------------- .../date-picker/calendar-footer.component.ts | 2 +- ...ponent.html => date-picker.component.html} | 0 .../date-picker/date-picker.component.spec.ts | 2 +- .../date-picker/date-picker.component.ts | 320 +++++++++++++++++- .../date-picker/date-range-popup.component.ts | 4 +- .../date-picker/inner-popup.component.ts | 2 +- .../date-picker/lib/abstract-panel-header.ts | 3 +- components/date-picker/lib/public-api.ts | 3 + components/date-picker/lib/util.ts | 65 ---- .../month-picker.component.spec.ts | 2 +- .../date-picker/month-picker.component.ts | 45 +-- components/date-picker/name.ts | 9 - components/date-picker/picker.component.ts | 2 +- components/date-picker/public-api.ts | 8 +- .../range-picker.component.spec.ts | 2 +- .../date-picker/range-picker.component.ts | 48 +-- components/date-picker/testing/util.ts | 2 +- components/date-picker/{lib => }/util.spec.ts | 2 +- components/date-picker/util.ts | 74 ++++ .../date-picker/week-picker.component.ts | 47 +-- .../date-picker/year-picker.component.spec.ts | 2 +- .../date-picker/year-picker.component.ts | 45 +-- 23 files changed, 438 insertions(+), 564 deletions(-) delete mode 100644 components/date-picker/abstract-picker.component.ts rename components/date-picker/{abstract-picker.component.html => date-picker.component.html} (100%) delete mode 100644 components/date-picker/name.ts rename components/date-picker/{lib => }/util.spec.ts (94%) create mode 100644 components/date-picker/util.ts diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts deleted file mode 100644 index 84fb12206e..0000000000 --- a/components/date-picker/abstract-picker.component.ts +++ /dev/null @@ -1,313 +0,0 @@ -/** - * @license - * Copyright Alibaba.com All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE - */ - -import { - ChangeDetectorRef, - EventEmitter, - Input, - OnChanges, - OnDestroy, - OnInit, - Output, - SimpleChanges, - TemplateRef, - ViewChild -} from '@angular/core'; -import { ControlValueAccessor } from '@angular/forms'; - -import { - CandyDate, - cloneDate, - CompatibleValue, - FunctionProp, - InputBoolean, - NzNoAnimationDirective, - valueFunctionProp, - warnDeprecation -} from 'ng-zorro-antd/core'; -import { DateHelperService, NzDatePickerI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; -import { DatePickerService } from './date-picker.service'; - -import { NzPickerComponent } from './picker.component'; -import { CompatibleDate, DisabledTimeFn, PanelMode, PresetRanges, SupportTimeOptions } from './standard-types'; - -const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working beacuse the overlay can't get the height/width of it's content) - -/** - * The base picker for all common APIs - */ -export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor { - isRange: boolean = false; // Indicate whether the value is a range value - showWeek: boolean = false; // Should show as week picker - focused: boolean = false; - extraFooter: TemplateRef | string; - hostClassMap = {}; - - protected destroyed$: Subject = new Subject(); - protected isCustomPlaceHolder: boolean = false; - - // --- Common API - @Input() @InputBoolean() nzAllowClear: boolean = true; - @Input() @InputBoolean() nzAutoFocus: boolean = false; - @Input() @InputBoolean() nzDisabled: boolean = false; - @Input() @InputBoolean() nzOpen: boolean; - /** - * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. - */ - @Input() nzClassName: string; - @Input() nzDisabledDate: (d: Date) => boolean; - @Input() nzLocale: NzDatePickerI18nInterface; - @Input() nzPlaceHolder: string | string[]; - @Input() nzPopupStyle: object = POPUP_STYLE_PATCH; - @Input() nzDropdownClassName: string; - @Input() nzSize: 'large' | 'small'; - /** - * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. - */ - @Input() nzStyle: object; - @Input() nzFormat: string; - @Input() nzDateRender: FunctionProp | string>; - @Input() nzDisabledTime: DisabledTimeFn; - @Input() nzRenderExtraFooter: FunctionProp | string>; - @Input() @InputBoolean() nzShowToday: boolean = true; - @Input() nzMode: PanelMode | PanelMode[] = 'date'; - @Input() nzRanges: PresetRanges; - @Input() nzDefaultPickerValue: CompatibleDate | null = null; - @Input() nzShowTime: SupportTimeOptions | boolean = false; - @Input() nzSeparator: string = '~'; - - @Output() readonly nzOnPanelChange = new EventEmitter(); - @Output() readonly nzOnCalendarChange = new EventEmitter>(); - @Output() readonly nzOnOk = new EventEmitter(); - @Output() readonly nzOnOpenChange = new EventEmitter(); - - @ViewChild(NzPickerComponent, { static: true }) protected picker: NzPickerComponent; - - get realOpenState(): boolean { - return this.picker.animationOpenState; - } // Use picker's real open state to let re-render the picker's content when shown up - - updateHostClass(): void { - this.hostClassMap = { - [`ant-picker`]: true, - [`ant-picker-range`]: this.isRange, - [`ant-picker-large`]: this.nzSize === 'large', - [`ant-picker-small`]: this.nzSize === 'small', - [`ant-picker-focused`]: this.focused, - [`ant-picker-disabled`]: this.nzDisabled - }; - } - - constructor( - public datePickerService: DatePickerService, - protected i18n: NzI18nService, - protected cdr: ChangeDetectorRef, - protected dateHelper: DateHelperService, - public noAnimation?: NzNoAnimationDirective - ) {} - - ngOnInit(): void { - // Subscribe the every locale change if the nzLocale is not handled by user - if (!this.nzLocale) { - this.i18n.localeChange.pipe(takeUntil(this.destroyed$)).subscribe(() => this.setLocale()); - } - - // Default value - this.datePickerService.isRange = this.isRange; - this.datePickerService.initValue(); - this.datePickerService.emitValue$.pipe(takeUntil(this.destroyed$)).subscribe(_ => { - const value = this.datePickerService.value; - this.datePickerService.initialValue = cloneDate(value); - // this.datePickerService.activeDate = cloneDate(value); - if (this.isRange) { - const vAsRange = value as CandyDate[]; - if (vAsRange.length) { - this.onChangeFn([vAsRange[0].nativeDate, vAsRange[1].nativeDate]); - } else { - this.onChangeFn([]); - } - } else { - if (value) { - this.onChangeFn((value as CandyDate).nativeDate); - } else { - this.onChangeFn(null); - } - } - this.onTouchedFn(); - // When value emitted, overlay will be closed - this.picker.hideOverlay(); - }); - - this.updateHostClass(); - this.updatePickerStyle(); - // Default format when it's empty - if (!this.nzFormat) { - if (this.showWeek) { - this.nzFormat = 'yyyy-ww'; // Format for week - } else { - this.nzFormat = this.nzShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'; - } - } - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes.nzSize || changes.nzDisabled) { - this.updateHostClass(); - } - - if (changes.nzPopupStyle) { - // Always assign the popup style patch - this.nzPopupStyle = this.nzPopupStyle ? { ...this.nzPopupStyle, ...POPUP_STYLE_PATCH } : POPUP_STYLE_PATCH; - } - - // Mark as customized placeholder by user once nzPlaceHolder assigned at the first time - if (changes.nzPlaceHolder && changes.nzPlaceHolder.firstChange && typeof this.nzPlaceHolder !== 'undefined') { - this.isCustomPlaceHolder = true; - } - - if (changes.nzLocale) { - // The nzLocale is currently handled by user - this.setDefaultPlaceHolder(); - } - - if (changes.nzRenderExtraFooter) { - this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter); - } - - if (changes.nzStyle) { - warnDeprecation( - `'nzStyle' in DatePicker is going to be removed in 10.0.0. Please use CSS style attribute like instead.` - ); - this.updatePickerStyle(); - } - - if (changes.nzClassName) { - warnDeprecation( - `'nzClassName' in DatePicker is going to be removed in 10.0.0. Please use CSS class attribute like instead.` - ); - } - - if (changes.nzMode) { - this.setPanelMode(); - } - } - - ngOnDestroy(): void { - this.destroyed$.next(); - this.destroyed$.complete(); - } - - setPanelMode(): void { - if (!this.nzMode) { - this.nzMode = this.isRange ? ['date', 'date'] : 'date'; - } - } - - updatePickerStyle(): void { - this.nzStyle = { display: 'inherit', width: '100%', ...this.nzStyle }; - } - - /** - * Triggered when overlayOpen changes (different with realOpenState) - * @param open The overlayOpen in picker component - */ - onOpenChange(open: boolean): void { - this.nzOnOpenChange.emit(open); - } - - // ------------------------------------------------------------------------ - // | Control value accessor implements - // ------------------------------------------------------------------------ - - // NOTE: onChangeFn/onTouchedFn will not be assigned if user not use as ngModel - onChangeFn: (val: CompatibleDate | null) => void = () => void 0; - onTouchedFn: () => void = () => void 0; - - writeValue(value: CompatibleDate): void { - this.setValue(value); - this.cdr.markForCheck(); - } - - // tslint:disable-next-line:no-any - registerOnChange(fn: any): void { - this.onChangeFn = fn; - } - - // tslint:disable-next-line:no-any - registerOnTouched(fn: any): void { - this.onTouchedFn = fn; - } - - // ------------------------------------------------------------------------ - // | Internal methods - // ------------------------------------------------------------------------ - - // Reload locale from i18n with side effects - private setLocale(): void { - this.nzLocale = this.i18n.getLocaleData('DatePicker', {}); - this.setDefaultPlaceHolder(); - this.cdr.markForCheck(); - } - - private setDefaultPlaceHolder(): void { - if (!this.isCustomPlaceHolder && this.nzLocale) { - this.nzPlaceHolder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder; - } - } - - // Safe way of setting value with default - private setValue(value: CompatibleDate): void { - const newValue: CompatibleValue = this.datePickerService.makeValue(value); - this.datePickerService.setValue(newValue); - this.datePickerService.initialValue = newValue; - } - - get realShowToday(): boolean { - // Range not support nzShowToday currently - return !this.isRange && this.nzShowToday; - } - - onFocusChange(value: boolean): void { - this.focused = value; - this.updateHostClass(); - } - - onPanelModeChange(panelMode: PanelMode | PanelMode[]): void { - // this.nzMode = panelMode; - this.nzOnPanelChange.emit(panelMode); - } - - // Emit nzOnCalendarChange when select date by nz-range-picker - onCalendarChange(value: CandyDate[]): void { - if (this.isRange) { - const rangeValue = value.filter(x => x instanceof CandyDate).map(x => x.nativeDate); - this.nzOnCalendarChange.emit(rangeValue); - } - } - - // Emitted when done with date selecting - onResultOk(): void { - if (this.isRange) { - const value = this.datePickerService.value as CandyDate[]; - if (value.length) { - this.nzOnOk.emit([value[0].nativeDate, value[1].nativeDate]); - } else { - this.nzOnOk.emit([]); - } - } else { - if (this.datePickerService.value) { - this.nzOnOk.emit((this.datePickerService.value as CandyDate).nativeDate); - } else { - this.nzOnOk.emit(null); - } - } - this.datePickerService.emitValue$.next(); - } -} diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts index a003b8d4c7..12f5480e3c 100644 --- a/components/date-picker/calendar-footer.component.ts +++ b/components/date-picker/calendar-footer.component.ts @@ -21,7 +21,7 @@ import { import { CandyDate, isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core'; import { DateHelperService, NzCalendarI18nInterface } from 'ng-zorro-antd/i18n'; import { transCompatFormat } from './lib/util'; -import { PREFIX_CLASS } from './name'; +import { PREFIX_CLASS } from './util'; @Component({ encapsulation: ViewEncapsulation.None, diff --git a/components/date-picker/abstract-picker.component.html b/components/date-picker/date-picker.component.html similarity index 100% rename from components/date-picker/abstract-picker.component.html rename to components/date-picker/date-picker.component.html diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index 59dc4685b8..75c07e3647 100644 --- a/components/date-picker/date-picker.component.spec.ts +++ b/components/date-picker/date-picker.component.spec.ts @@ -11,8 +11,8 @@ import isSameDay from 'date-fns/isSameDay'; import { dispatchKeyboardEvent, dispatchMouseEvent, NgStyleInterface, typeInElement } from 'ng-zorro-antd/core'; import en_US from '../i18n/languages/en_US'; -import { PREFIX_CLASS } from './name'; import { getPicker, getPickerAbstract, getPickerInput } from './testing/util'; +import { PREFIX_CLASS } from './util'; import { enUS } from 'date-fns/locale'; import { NZ_DATE_LOCALE, NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n'; diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts index 564f0fbe29..e178318333 100644 --- a/components/date-picker/date-picker.component.ts +++ b/components/date-picker/date-picker.component.ts @@ -6,20 +6,55 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Host, Optional, ViewEncapsulation } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + forwardRef, + Host, + Input, + OnChanges, + OnDestroy, + OnInit, + Optional, + Output, + SimpleChanges, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core'; -import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n'; -import { AbstractPickerComponent } from './abstract-picker.component'; +import { + CandyDate, + cloneDate, + CompatibleValue, + FunctionProp, + InputBoolean, + NzNoAnimationDirective, + valueFunctionProp, + warnDeprecation +} from 'ng-zorro-antd/core'; +import { DateHelperService, NzDatePickerI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { DatePickerService } from './date-picker.service'; +import { NzPickerComponent } from './picker.component'; +import { CompatibleDate, DisabledTimeFn, PanelMode, PresetRanges, SupportTimeOptions } from './standard-types'; + +const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working beacuse the overlay can't get the height/width of it's content) + +/** + * The base picker for all common APIs + */ @Component({ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - selector: 'nz-date-picker', + selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker', exportAs: 'nzDatePicker', - templateUrl: './abstract-picker.component.html', + templateUrl: './date-picker.component.html', host: { '[class]': 'hostClassMap' }, @@ -32,14 +67,271 @@ import { DatePickerService } from './date-picker.service'; } ] }) -export class NzDatePickerComponent extends AbstractPickerComponent { +export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor { + isRange: boolean = false; // Indicate whether the value is a range value + showWeek: boolean = false; // Should show as week picker + focused: boolean = false; + extraFooter: TemplateRef | string; + hostClassMap = {}; + + protected destroyed$: Subject = new Subject(); + protected isCustomPlaceHolder: boolean = false; + + // --- Common API + @Input() @InputBoolean() nzAllowClear: boolean = true; + @Input() @InputBoolean() nzAutoFocus: boolean = false; + @Input() @InputBoolean() nzDisabled: boolean = false; + @Input() @InputBoolean() nzOpen: boolean; + /** + * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. + */ + @Input() nzClassName: string; + @Input() nzDisabledDate: (d: Date) => boolean; + @Input() nzLocale: NzDatePickerI18nInterface; + @Input() nzPlaceHolder: string | string[]; + @Input() nzPopupStyle: object = POPUP_STYLE_PATCH; + @Input() nzDropdownClassName: string; + @Input() nzSize: 'large' | 'small'; + /** + * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. + */ + @Input() nzStyle: object; + @Input() nzFormat: string; + @Input() nzDateRender: FunctionProp | string>; + @Input() nzDisabledTime: DisabledTimeFn; + @Input() nzRenderExtraFooter: FunctionProp | string>; + @Input() @InputBoolean() nzShowToday: boolean = true; + @Input() nzMode: PanelMode | PanelMode[] = 'date'; + @Input() nzRanges: PresetRanges; + @Input() nzDefaultPickerValue: CompatibleDate | null = null; + @Input() nzShowTime: SupportTimeOptions | boolean = false; + @Input() nzSeparator: string = '~'; + + @Output() readonly nzOnPanelChange = new EventEmitter(); + @Output() readonly nzOnCalendarChange = new EventEmitter>(); + @Output() readonly nzOnOk = new EventEmitter(); + @Output() readonly nzOnOpenChange = new EventEmitter(); + + @ViewChild(NzPickerComponent, { static: true }) protected picker: NzPickerComponent; + + get realOpenState(): boolean { + return this.picker.animationOpenState; + } // Use picker's real open state to let re-render the picker's content when shown up + + updateHostClass(): void { + this.hostClassMap = { + [`ant-picker`]: true, + [`ant-picker-range`]: this.isRange, + [`ant-picker-large`]: this.nzSize === 'large', + [`ant-picker-small`]: this.nzSize === 'small', + [`ant-picker-focused`]: this.focused, + [`ant-picker-disabled`]: this.nzDisabled + }; + } + constructor( - datePickerService: DatePickerService, - i18n: NzI18nService, - cdr: ChangeDetectorRef, - dateHelper: DateHelperService, + public datePickerService: DatePickerService, + protected i18n: NzI18nService, + protected cdr: ChangeDetectorRef, + protected dateHelper: DateHelperService, @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(datePickerService, i18n, cdr, dateHelper, noAnimation); + ) {} + + ngOnInit(): void { + // Subscribe the every locale change if the nzLocale is not handled by user + if (!this.nzLocale) { + this.i18n.localeChange.pipe(takeUntil(this.destroyed$)).subscribe(() => this.setLocale()); + } + + // Default value + this.datePickerService.isRange = this.isRange; + this.datePickerService.initValue(); + this.datePickerService.emitValue$.pipe(takeUntil(this.destroyed$)).subscribe(_ => { + const value = this.datePickerService.value; + this.datePickerService.initialValue = cloneDate(value); + // this.datePickerService.activeDate = cloneDate(value); + if (this.isRange) { + const vAsRange = value as CandyDate[]; + if (vAsRange.length) { + this.onChangeFn([vAsRange[0].nativeDate, vAsRange[1].nativeDate]); + } else { + this.onChangeFn([]); + } + } else { + if (value) { + this.onChangeFn((value as CandyDate).nativeDate); + } else { + this.onChangeFn(null); + } + } + this.onTouchedFn(); + // When value emitted, overlay will be closed + this.picker.hideOverlay(); + }); + + this.updateHostClass(); + this.updatePickerStyle(); + // Default format when it's empty + if (!this.nzFormat) { + if (this.showWeek) { + this.nzFormat = 'yyyy-ww'; // Format for week + } else { + this.nzFormat = this.nzShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'; + } + } + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.nzSize || changes.nzDisabled) { + this.updateHostClass(); + } + + if (changes.nzPopupStyle) { + // Always assign the popup style patch + this.nzPopupStyle = this.nzPopupStyle ? { ...this.nzPopupStyle, ...POPUP_STYLE_PATCH } : POPUP_STYLE_PATCH; + } + + // Mark as customized placeholder by user once nzPlaceHolder assigned at the first time + if (changes.nzPlaceHolder && changes.nzPlaceHolder.firstChange && typeof this.nzPlaceHolder !== 'undefined') { + this.isCustomPlaceHolder = true; + } + + if (changes.nzLocale) { + // The nzLocale is currently handled by user + this.setDefaultPlaceHolder(); + } + + if (changes.nzRenderExtraFooter) { + this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter); + } + + if (changes.nzStyle) { + warnDeprecation( + `'nzStyle' in DatePicker is going to be removed in 10.0.0. Please use CSS style attribute like instead.` + ); + this.updatePickerStyle(); + } + + if (changes.nzClassName) { + warnDeprecation( + `'nzClassName' in DatePicker is going to be removed in 10.0.0. Please use CSS class attribute like instead.` + ); + } + + if (changes.nzMode) { + this.setPanelMode(); + } + } + + ngOnDestroy(): void { + this.destroyed$.next(); + this.destroyed$.complete(); + } + + setPanelMode(): void { + if (!this.nzMode) { + this.nzMode = this.isRange ? ['date', 'date'] : 'date'; + } + } + + updatePickerStyle(): void { + this.nzStyle = { display: 'inherit', width: '100%', ...this.nzStyle }; + } + + /** + * Triggered when overlayOpen changes (different with realOpenState) + * @param open The overlayOpen in picker component + */ + onOpenChange(open: boolean): void { + this.nzOnOpenChange.emit(open); + } + + // ------------------------------------------------------------------------ + // | Control value accessor implements + // ------------------------------------------------------------------------ + + // NOTE: onChangeFn/onTouchedFn will not be assigned if user not use as ngModel + onChangeFn: (val: CompatibleDate | null) => void = () => void 0; + onTouchedFn: () => void = () => void 0; + + writeValue(value: CompatibleDate): void { + this.setValue(value); + this.cdr.markForCheck(); + } + + // tslint:disable-next-line:no-any + registerOnChange(fn: any): void { + this.onChangeFn = fn; + } + + // tslint:disable-next-line:no-any + registerOnTouched(fn: any): void { + this.onTouchedFn = fn; + } + + // ------------------------------------------------------------------------ + // | Internal methods + // ------------------------------------------------------------------------ + + // Reload locale from i18n with side effects + private setLocale(): void { + this.nzLocale = this.i18n.getLocaleData('DatePicker', {}); + this.setDefaultPlaceHolder(); + this.cdr.markForCheck(); + } + + private setDefaultPlaceHolder(): void { + if (!this.isCustomPlaceHolder && this.nzLocale) { + this.nzPlaceHolder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder; + } + } + + // Safe way of setting value with default + private setValue(value: CompatibleDate): void { + const newValue: CompatibleValue = this.datePickerService.makeValue(value); + this.datePickerService.setValue(newValue); + this.datePickerService.initialValue = newValue; + } + + get realShowToday(): boolean { + // Range not support nzShowToday currently + return !this.isRange && this.nzShowToday; + } + + onFocusChange(value: boolean): void { + this.focused = value; + this.updateHostClass(); + } + + onPanelModeChange(panelMode: PanelMode | PanelMode[]): void { + // this.nzMode = panelMode; + this.nzOnPanelChange.emit(panelMode); + } + + // Emit nzOnCalendarChange when select date by nz-range-picker + onCalendarChange(value: CandyDate[]): void { + if (this.isRange) { + const rangeValue = value.filter(x => x instanceof CandyDate).map(x => x.nativeDate); + this.nzOnCalendarChange.emit(rangeValue); + } + } + + // Emitted when done with date selecting + onResultOk(): void { + if (this.isRange) { + const value = this.datePickerService.value as CandyDate[]; + if (value.length) { + this.nzOnOk.emit([value[0].nativeDate, value[1].nativeDate]); + } else { + this.nzOnOk.emit([]); + } + } else { + if (this.datePickerService.value) { + this.nzOnOk.emit((this.datePickerService.value as CandyDate).nativeDate); + } else { + this.nzOnOk.emit(null); + } + } + this.datePickerService.emitValue$.next(); } } diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts index 5972c17b95..6297c80e26 100644 --- a/components/date-picker/date-range-popup.component.ts +++ b/components/date-picker/date-range-popup.component.ts @@ -26,9 +26,6 @@ import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { DatePickerService } from './date-picker.service'; -import { PREFIX_CLASS } from './name'; - -import { getTimeConfig, isAllowedDate } from './lib/util'; import { CompatibleDate, DisabledDateFn, @@ -40,6 +37,7 @@ import { RangePartType, SupportTimeOptions } from './standard-types'; +import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util'; @Component({ encapsulation: ViewEncapsulation.None, diff --git a/components/date-picker/inner-popup.component.ts b/components/date-picker/inner-popup.component.ts index 71a5dbcf25..373dc64eac 100644 --- a/components/date-picker/inner-popup.component.ts +++ b/components/date-picker/inner-popup.component.ts @@ -20,8 +20,8 @@ import { import { CandyDate, FunctionProp } from 'ng-zorro-antd/core'; import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n'; -import { PREFIX_CLASS } from './name'; import { DisabledDateFn, PanelMode, SupportTimeOptions } from './standard-types'; +import { PREFIX_CLASS } from './util'; @Component({ encapsulation: ViewEncapsulation.None, diff --git a/components/date-picker/lib/abstract-panel-header.ts b/components/date-picker/lib/abstract-panel-header.ts index 9b4da3c373..6ac6126da3 100644 --- a/components/date-picker/lib/abstract-panel-header.ts +++ b/components/date-picker/lib/abstract-panel-header.ts @@ -9,12 +9,11 @@ import { EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { CandyDate } from 'ng-zorro-antd/core'; import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n'; -import { PREFIX_CLASS } from '../name'; import { PanelMode } from '../standard-types'; import { PanelSelector } from './interface'; export abstract class AbstractPanelHeader implements OnInit, OnChanges { - prefixCls: string = `${PREFIX_CLASS}-header`; + prefixCls: string = `ant-picker-header`; selectors: PanelSelector[] = []; @Input() value: CandyDate; diff --git a/components/date-picker/lib/public-api.ts b/components/date-picker/lib/public-api.ts index b51806e0b8..6685c61529 100644 --- a/components/date-picker/lib/public-api.ts +++ b/components/date-picker/lib/public-api.ts @@ -14,4 +14,7 @@ export { MonthHeaderComponent as ɵMonthHeaderComponent } from './month-header.c export { MonthTableComponent as ɵMonthTableComponent } from './month-table.component'; export { DateHeaderComponent as ɵDateHeaderComponent } from './date-header.component'; export { DateTableComponent as ɵDateTableComponent } from './date-table.component'; +export { AbstractPanelHeader as ɵAbstractPanelHeader } from './abstract-panel-header'; +export { AbstractTable as ɵAbstractTable } from './abstract-table'; export { LibPackerModule } from './lib-packer.module'; +export { transCompatFormat } from './util'; diff --git a/components/date-picker/lib/util.ts b/components/date-picker/lib/util.ts index cb3d43bfc6..1861cf92cf 100644 --- a/components/date-picker/lib/util.ts +++ b/components/date-picker/lib/util.ts @@ -6,71 +6,6 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { CandyDate } from 'ng-zorro-antd/core'; -import { DisabledDateFn, DisabledTimeConfig, DisabledTimeFn } from '../standard-types'; - -const defaultDisabledTime: DisabledTimeConfig = { - nzDisabledHours(): number[] { - return []; - }, - nzDisabledMinutes(): number[] { - return []; - }, - nzDisabledSeconds(): number[] { - return []; - } -}; - -export function getTimeConfig(value: CandyDate, disabledTime: DisabledTimeFn): DisabledTimeConfig { - let disabledTimeConfig = disabledTime ? disabledTime(value && value.nativeDate) : ({} as DisabledTimeConfig); - disabledTimeConfig = { - ...defaultDisabledTime, - ...disabledTimeConfig - }; - return disabledTimeConfig; -} - -export function isTimeValidByConfig(value: CandyDate, disabledTimeConfig: DisabledTimeConfig): boolean { - let invalidTime = false; - if (value) { - const hour = value.getHours(); - const minutes = value.getMinutes(); - const seconds = value.getSeconds(); - const disabledHours = disabledTimeConfig.nzDisabledHours(); - if (disabledHours.indexOf(hour) === -1) { - const disabledMinutes = disabledTimeConfig.nzDisabledMinutes(hour); - if (disabledMinutes.indexOf(minutes) === -1) { - const disabledSeconds = disabledTimeConfig.nzDisabledSeconds(hour, minutes); - invalidTime = disabledSeconds.indexOf(seconds) !== -1; - } else { - invalidTime = true; - } - } else { - invalidTime = true; - } - } - return !invalidTime; -} - -export function isTimeValid(value: CandyDate, disabledTime: DisabledTimeFn): boolean { - const disabledTimeConfig = getTimeConfig(value, disabledTime); - return isTimeValidByConfig(value, disabledTimeConfig); -} - -export function isAllowedDate(value: CandyDate, disabledDate?: DisabledDateFn, disabledTime?: DisabledTimeFn): boolean { - if (disabledDate) { - if (disabledDate(value.nativeDate)) { - return false; - } - } - if (disabledTime) { - if (!isTimeValid(value, disabledTime)) { - return false; - } - } - return true; -} - /** * Compatible translate the moment-like format pattern to angular's pattern * Why? For now, we need to support the existing language formats in AntD, and AntD uses the default temporal syntax. diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts index 00b632dbd3..bef18dd348 100644 --- a/components/date-picker/month-picker.component.spec.ts +++ b/components/date-picker/month-picker.component.spec.ts @@ -9,8 +9,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import isBefore from 'date-fns/isBefore'; import { dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core'; -import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/name'; import { getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util'; +import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzDatePickerModule } from './date-picker.module'; diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts index 16f2bee537..00bfd9bce7 100644 --- a/components/date-picker/month-picker.component.ts +++ b/components/date-picker/month-picker.component.ts @@ -6,44 +6,17 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Host, Input, Optional, ViewEncapsulation } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Directive, Host, Optional } from '@angular/core'; +import { NzDatePickerComponent } from './date-picker.component'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core'; -import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n'; -import { AbstractPickerComponent } from './abstract-picker.component'; -import { DatePickerService } from './date-picker.service'; -import { PanelMode } from './standard-types'; - -@Component({ - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, +@Directive({ selector: 'nz-month-picker', - exportAs: 'nzMonthPicker', - templateUrl: './abstract-picker.component.html', - host: { - '[class]': 'hostClassMap' - }, - providers: [ - DatePickerService, - { - provide: NG_VALUE_ACCESSOR, - multi: true, - useExisting: forwardRef(() => NzMonthPickerComponent) - } - ] + exportAs: 'nzMonthPicker' }) -export class NzMonthPickerComponent extends AbstractPickerComponent { - @Input() nzFormat: string = 'yyyy-MM'; - @Input() nzMode: PanelMode | PanelMode[] = 'month'; - - constructor( - datePickerService: DatePickerService, - i18n: NzI18nService, - cdr: ChangeDetectorRef, - dateHelper: DateHelperService, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(datePickerService, i18n, cdr, dateHelper, noAnimation); +// tslint:disable-next-line:directive-class-suffix +export class NzMonthPickerComponent { + constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + this.datePicker.nzMode = 'month'; + this.datePicker.nzFormat = 'yyyy-MM'; } } diff --git a/components/date-picker/name.ts b/components/date-picker/name.ts deleted file mode 100644 index 1f16af416a..0000000000 --- a/components/date-picker/name.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @license - * Copyright Alibaba.com All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE - */ - -export const PREFIX_CLASS = 'ant-picker'; diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts index b2f1f7d4ff..18fc3cb3af 100644 --- a/components/date-picker/picker.component.ts +++ b/components/date-picker/picker.component.ts @@ -31,8 +31,8 @@ import { DateHelperService } from 'ng-zorro-antd/i18n'; import { Subject } from 'rxjs'; import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { DatePickerService } from './date-picker.service'; -import { PREFIX_CLASS } from './name'; import { RangePartType } from './standard-types'; +import { PREFIX_CLASS } from './util'; @Component({ encapsulation: ViewEncapsulation.None, diff --git a/components/date-picker/public-api.ts b/components/date-picker/public-api.ts index 5d5cf57847..50875d1cf6 100644 --- a/components/date-picker/public-api.ts +++ b/components/date-picker/public-api.ts @@ -7,6 +7,7 @@ */ export { PickerResult, PickerResultSingle, PickerResultRange, PresetRanges, PanelMode } from './standard-types'; +export { PREFIX_CLASS, getTimeConfig, isAllowedDate, isTimeValid, isTimeValidByConfig } from './util'; export { NzDatePickerModule } from './date-picker.module'; export { NzDatePickerComponent } from './date-picker.component'; @@ -14,5 +15,10 @@ export { NzRangePickerComponent } from './range-picker.component'; export { NzMonthPickerComponent } from './month-picker.component'; export { NzWeekPickerComponent } from './week-picker.component'; export { NzYearPickerComponent } from './year-picker.component'; +export { DatePickerService as ɵDatePickerService } from './date-picker.service'; +export { DateRangePopupComponent as ɵDateRangePopupComponent } from './date-range-popup.component'; +export { InnerPopupComponent as ɵInnerPopupComponent } from './inner-popup.component'; +export { NzPickerComponent as ɵNzPickerComponent } from './picker.component'; +export { CalendarFooterComponent as ɵCalendarFooterComponet } from './calendar-footer.component'; -export * from './lib'; +export * from './lib/public-api'; diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts index 331ae2bb83..d59fc3d76e 100644 --- a/components/date-picker/range-picker.component.spec.ts +++ b/components/date-picker/range-picker.component.spec.ts @@ -11,9 +11,9 @@ import differenceInDays from 'date-fns/differenceInDays'; import isSameDay from 'date-fns/isSameDay'; import { dispatchKeyboardEvent, dispatchMouseEvent, NgStyleInterface, typeInElement } from 'ng-zorro-antd/core'; -import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/name'; import { RangePartType } from 'ng-zorro-antd/date-picker/standard-types'; import { getPicker, getPickerAbstract, getPickerInput, getRangePickerRightInput } from 'ng-zorro-antd/date-picker/testing/util'; +import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util'; import { CandyDate } from '../core'; import { NzDatePickerModule } from './date-picker.module'; diff --git a/components/date-picker/range-picker.component.ts b/components/date-picker/range-picker.component.ts index 56be07419e..028f1beff8 100644 --- a/components/date-picker/range-picker.component.ts +++ b/components/date-picker/range-picker.component.ts @@ -6,47 +6,17 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Host, Input, Optional, ViewEncapsulation } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Directive, Host, Optional } from '@angular/core'; +import { NzDatePickerComponent } from './date-picker.component'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core'; -import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n'; -import { AbstractPickerComponent } from './abstract-picker.component'; -import { DatePickerService } from './date-picker.service'; -import { PanelMode } from './standard-types'; - -@Component({ - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, +@Directive({ selector: 'nz-range-picker', - exportAs: 'nzRangePicker', - templateUrl: './abstract-picker.component.html', - host: { - '[class]': 'hostClassMap' - }, - providers: [ - DatePickerService, - { - provide: NG_VALUE_ACCESSOR, - multi: true, - useExisting: forwardRef(() => NzRangePickerComponent) - } - ] + exportAs: 'nzRangePicker' }) -export class NzRangePickerComponent extends AbstractPickerComponent { - isRange: boolean = true; - @Input() nzMode: PanelMode[] = ['date', 'date']; - - constructor( - datePickerService: DatePickerService, - i18n: NzI18nService, - cdr: ChangeDetectorRef, - dateHelper: DateHelperService, - // renderer: Renderer2, - // elementRef: ElementRef, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(datePickerService, i18n, cdr, dateHelper, noAnimation); - // renderer.addClass(elementRef.nativeElement, 'ant-picker'); +// tslint:disable-next-line:directive-class-suffix +export class NzRangePickerComponent { + constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + this.datePicker.isRange = true; + this.datePicker.nzMode = ['date', 'date']; } } diff --git a/components/date-picker/testing/util.ts b/components/date-picker/testing/util.ts index 0450105038..be40f45696 100644 --- a/components/date-picker/testing/util.ts +++ b/components/date-picker/testing/util.ts @@ -8,7 +8,7 @@ import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; -import { PREFIX_CLASS } from '../name'; +import { PREFIX_CLASS } from '../util'; import { NzPickerComponent } from '../picker.component'; export function getPickerAbstract(debugElement: DebugElement): T { diff --git a/components/date-picker/lib/util.spec.ts b/components/date-picker/util.spec.ts similarity index 94% rename from components/date-picker/lib/util.spec.ts rename to components/date-picker/util.spec.ts index 5ee1f5e92f..648edee1cf 100644 --- a/components/date-picker/lib/util.spec.ts +++ b/components/date-picker/util.spec.ts @@ -1,4 +1,4 @@ -import { CandyDate } from '../../core'; +import { CandyDate } from '../core'; import { isAllowedDate } from './util'; describe('util.ts coverage supplements', () => { diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts new file mode 100644 index 0000000000..dc6d085121 --- /dev/null +++ b/components/date-picker/util.ts @@ -0,0 +1,74 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { CandyDate } from 'ng-zorro-antd/core'; +import { DisabledDateFn, DisabledTimeConfig, DisabledTimeFn } from './standard-types'; + +export const PREFIX_CLASS = 'ant-picker'; + +const defaultDisabledTime: DisabledTimeConfig = { + nzDisabledHours(): number[] { + return []; + }, + nzDisabledMinutes(): number[] { + return []; + }, + nzDisabledSeconds(): number[] { + return []; + } +}; + +export function getTimeConfig(value: CandyDate, disabledTime: DisabledTimeFn): DisabledTimeConfig { + let disabledTimeConfig = disabledTime ? disabledTime(value && value.nativeDate) : ({} as DisabledTimeConfig); + disabledTimeConfig = { + ...defaultDisabledTime, + ...disabledTimeConfig + }; + return disabledTimeConfig; +} + +export function isTimeValidByConfig(value: CandyDate, disabledTimeConfig: DisabledTimeConfig): boolean { + let invalidTime = false; + if (value) { + const hour = value.getHours(); + const minutes = value.getMinutes(); + const seconds = value.getSeconds(); + const disabledHours = disabledTimeConfig.nzDisabledHours(); + if (disabledHours.indexOf(hour) === -1) { + const disabledMinutes = disabledTimeConfig.nzDisabledMinutes(hour); + if (disabledMinutes.indexOf(minutes) === -1) { + const disabledSeconds = disabledTimeConfig.nzDisabledSeconds(hour, minutes); + invalidTime = disabledSeconds.indexOf(seconds) !== -1; + } else { + invalidTime = true; + } + } else { + invalidTime = true; + } + } + return !invalidTime; +} + +export function isTimeValid(value: CandyDate, disabledTime: DisabledTimeFn): boolean { + const disabledTimeConfig = getTimeConfig(value, disabledTime); + return isTimeValidByConfig(value, disabledTimeConfig); +} + +export function isAllowedDate(value: CandyDate, disabledDate?: DisabledDateFn, disabledTime?: DisabledTimeFn): boolean { + if (disabledDate) { + if (disabledDate(value.nativeDate)) { + return false; + } + } + if (disabledTime) { + if (!isTimeValid(value, disabledTime)) { + return false; + } + } + return true; +} diff --git a/components/date-picker/week-picker.component.ts b/components/date-picker/week-picker.component.ts index ce2c1748d5..144b8f29d0 100644 --- a/components/date-picker/week-picker.component.ts +++ b/components/date-picker/week-picker.component.ts @@ -6,45 +6,18 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Host, Input, Optional, ViewEncapsulation } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Directive, Host, Optional } from '@angular/core'; +import { NzDatePickerComponent } from './date-picker.component'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core'; -import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n'; -import { AbstractPickerComponent } from './abstract-picker.component'; -import { DatePickerService } from './date-picker.service'; -import { PanelMode } from './standard-types'; - -@Component({ - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, +@Directive({ selector: 'nz-week-picker', - exportAs: 'nzWeekPicker', - templateUrl: './abstract-picker.component.html', - host: { - '[class]': 'hostClassMap' - }, - providers: [ - DatePickerService, - { - provide: NG_VALUE_ACCESSOR, - multi: true, - useExisting: forwardRef(() => NzWeekPickerComponent) - } - ] + exportAs: 'nzWeekPicker' }) -export class NzWeekPickerComponent extends AbstractPickerComponent { - showWeek: boolean = true; - @Input() nzMode: PanelMode | PanelMode[] = 'week'; - @Input() nzFormat: string = 'yyyy-ww'; - - constructor( - datePickerService: DatePickerService, - i18n: NzI18nService, - cdr: ChangeDetectorRef, - dateHelper: DateHelperService, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(datePickerService, i18n, cdr, dateHelper, noAnimation); +// tslint:disable-next-line:directive-class-suffix +export class NzWeekPickerComponent { + constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + this.datePicker.showWeek = true; + this.datePicker.nzMode = 'week'; + this.datePicker.nzFormat = 'yyyy-ww'; } } diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts index f90b40bdbf..1400019116 100644 --- a/components/date-picker/year-picker.component.spec.ts +++ b/components/date-picker/year-picker.component.spec.ts @@ -6,8 +6,8 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core'; -import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/name'; import { getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util'; +import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzDatePickerModule } from './date-picker.module'; diff --git a/components/date-picker/year-picker.component.ts b/components/date-picker/year-picker.component.ts index 18328b9605..cb5ae7f2de 100644 --- a/components/date-picker/year-picker.component.ts +++ b/components/date-picker/year-picker.component.ts @@ -6,44 +6,17 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Host, Input, Optional, ViewEncapsulation } from '@angular/core'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Directive, Host, Optional } from '@angular/core'; +import { NzDatePickerComponent } from './date-picker.component'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core'; -import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n'; -import { AbstractPickerComponent } from './abstract-picker.component'; -import { DatePickerService } from './date-picker.service'; -import { PanelMode } from './standard-types'; - -@Component({ - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, +@Directive({ selector: 'nz-year-picker', - exportAs: 'nzYearPicker', - templateUrl: './abstract-picker.component.html', - host: { - '[class]': 'hostClassMap' - }, - providers: [ - DatePickerService, - { - provide: NG_VALUE_ACCESSOR, - multi: true, - useExisting: forwardRef(() => NzYearPickerComponent) - } - ] + exportAs: 'nzYearPicker' }) -export class NzYearPickerComponent extends AbstractPickerComponent { - @Input() nzMode: PanelMode | PanelMode[] = 'year'; - @Input() nzFormat: string = 'yyyy'; - - constructor( - datePickerService: DatePickerService, - i18n: NzI18nService, - cdr: ChangeDetectorRef, - dateHelper: DateHelperService, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(datePickerService, i18n, cdr, dateHelper, noAnimation); +// tslint:disable-next-line:directive-class-suffix +export class NzYearPickerComponent { + constructor(@Optional() @Host() public datePicker: NzDatePickerComponent) { + this.datePicker.nzMode = 'year'; + this.datePicker.nzFormat = 'yyyy'; } }