feat(module:date-picker): add some inputs (#4843)

* feat(module:date-picker): add nzDefaultPickerValue * feat: add nzSeparator * fix: reduce dom structure to make host style work
NG-ZORRO · Mar 11, 2020 · af4051e · af4051e
1 parent 72d320b
commit af4051e
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 97 deletions.
diff --git a/components/date-picker/abstract-picker.component.html b/components/date-picker/abstract-picker.component.html
@@ -2,21 +2,23 @@
   nz-picker
   [isRange]="isRange"
   [open]="nzOpen"
+  [separator]="nzSeparator"
   [disabled]="nzDisabled"
   [disabledDate]="nzDisabledDate"
   [format]="nzFormat"
   [allowClear]="nzAllowClear"
   [autoFocus]="nzAutoFocus"
   [placeholder]="nzPlaceHolder"
   [ngClass]="nzClassName"
-  [style]="pickerStyle"
+  [style]="nzStyle"
   [noAnimation]="noAnimation?.nzNoAnimation"
   (openChange)="onOpenChange($event)"
   (focusChange)="onFocusChange($event)"
 >
   <date-range-popup
     *ngIf="realOpenState"
     [isRange]="isRange"
+    [defaultPickerValue]="nzDefaultPickerValue"
     [showWeek]="showWeek"
     [panelMode]="nzMode"
     (panelModeChange)="onPanelModeChange($event)"

diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts
@@ -27,16 +27,16 @@ import {
   FunctionProp,
   InputBoolean,
   NzNoAnimationDirective,
-  toBoolean,
-  valueFunctionProp
+  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 } from './standard-types';
+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)
 
@@ -47,50 +47,49 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
   isRange: boolean = false; // Indicate whether the value is a range value
   showWeek: boolean = false; // Should show as week picker
   focused: boolean = false;
-  pickerStyle: object; // Final picker style that contains width fix corrections etc.
   extraFooter: TemplateRef<void> | string;
   hostClassMap = {};
 
   protected destroyed$: Subject<void> = new Subject();
   protected isCustomPlaceHolder: boolean = false;
-  private _showTime: object | boolean;
 
   // --- 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<TemplateRef<Date> | string>;
   @Input() nzDisabledTime: DisabledTimeFn;
   @Input() nzRenderExtraFooter: FunctionProp<TemplateRef<void> | 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<PanelMode | PanelMode[]>();
   @Output() readonly nzOnCalendarChange = new EventEmitter<Array<Date | null>>();
   @Output() readonly nzOnOk = new EventEmitter<CompatibleDate | null>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
 
   @ViewChild(NzPickerComponent, { static: true }) protected picker: NzPickerComponent;
 
-  @Input() get nzShowTime(): object | boolean {
-    return this._showTime;
-  }
-
-  set nzShowTime(value: object | boolean) {
-    this._showTime = typeof value === 'object' ? value : toBoolean(value);
-  }
-
   get realOpenState(): boolean {
     return this.picker.animationOpenState;
   } // Use picker's real open state to let re-render the picker's content when shown up
@@ -186,10 +185,19 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
       this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
     }
 
-    if (changes.nzShowTime || changes.nzStyle) {
+    if (changes.nzStyle) {
+      warnDeprecation(
+        `'nzStyle' in DatePicker is going to be removed in 10.0.0. Please use CSS style attribute like <nz-date-picker style="..."></nz-date-picker> 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 <nz-date-picker class="..."></nz-date-picker> instead.`
+      );
+    }
+
     if (changes.nzMode) {
       this.setPanelMode();
     }
@@ -206,6 +214,10 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
     }
   }
 
+  updatePickerStyle(): void {
+    this.nzStyle = { display: 'inherit', width: '100%', ...this.nzStyle };
+  }
+
   /**
    * Triggered when overlayOpen changes (different with realOpenState)
    * @param open The overlayOpen in picker component
@@ -256,12 +268,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
 
   // Safe way of setting value with default
   private setValue(value: CompatibleDate): void {
-    let newValue: CompatibleValue;
-    if (this.isRange) {
-      newValue = value ? (value as Date[]).map(val => new CandyDate(val)) : [];
-    } else {
-      newValue = value ? new CandyDate(value as Date) : null;
-    }
+    const newValue: CompatibleValue = this.datePickerService.makeValue(value);
     this.datePickerService.setValue(newValue);
     this.datePickerService.initialValue = newValue;
   }
@@ -276,15 +283,6 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
     this.updateHostClass();
   }
 
-  updatePickerStyle(): void {
-    if (this.nzShowTime) {
-      this.pickerStyle = { display: 'inherit', width: this.isRange ? '360px' : '174px' };
-    } else {
-      this.pickerStyle = { display: 'inherit', width: this.isRange ? '233px' : '111px' };
-    }
-    this.pickerStyle = { ...this.pickerStyle, ...this.nzStyle };
-  }
-
   onPanelModeChange(panelMode: PanelMode | PanelMode[]): void {
     // this.nzMode = panelMode;
     this.nzOnPanelChange.emit(panelMode);

diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -329,6 +329,7 @@ describe('NzDatePickerComponent', () => {
     }));
 
     it('should support nzValue', fakeAsync(() => {
+      fixtureInstance.nzDefaultPickerValue = new Date('2015-09-17');
       fixtureInstance.nzValue = new Date('2018-11-11');
       fixture.detectChanges();
       flush();
@@ -355,6 +356,16 @@ describe('NzDatePickerComponent', () => {
       const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
       expect(result.getDate()).toBe(+cellText);
     }));
+
+    it('should support nzDefaultPickerValue', fakeAsync(() => {
+      fixtureInstance.nzDefaultPickerValue = new Date('2015-09-17');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      expect(queryFromOverlay('.ant-picker-header-year-btn').textContent!.indexOf('2015') > -1).toBeTruthy();
+      expect(queryFromOverlay('.ant-picker-header-month-btn').textContent!.indexOf('9') > -1).toBeTruthy();
+    }));
   });
 
   describe('panel switch and move forward/afterward', () => {
@@ -403,6 +414,8 @@ describe('NzDatePickerComponent', () => {
     it('should support month panel changes', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2018-11-11');
       fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
       openPickerByClickTrigger();
       // Click month select to show month panel
       dispatchMouseEvent(queryFromOverlay('.ant-picker-header-month-btn'), 'click');
@@ -438,6 +451,8 @@ describe('NzDatePickerComponent', () => {
     it('should support year panel changes', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2018-11-11');
       fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
       openPickerByClickTrigger();
       // Click year select to show year panel
       dispatchMouseEvent(queryFromOverlay('.ant-picker-header-year-btn'), 'click');
@@ -840,6 +855,7 @@ describe('NzDatePickerComponent', () => {
         (nzOnOpenChange)="nzOnOpenChange($event)"
         [ngModel]="nzValue"
         (ngModelChange)="nzOnChange($event)"
+        [nzDefaultPickerValue]="nzDefaultPickerValue"
         [nzDateRender]="nzDateRender"
         [nzDisabledTime]="nzDisabledTime"
         [nzRenderExtraFooter]="nzRenderExtraFooter"
@@ -889,7 +905,7 @@ class NzTestDatePickerComponent {
   nzOnOpenChange(): void {}
 
   nzValue: Date | null;
-
+  nzDefaultPickerValue: Date | null;
   nzDateRender: any; // tslint:disable-line:no-any
   nzShowTime: boolean | object = false;
   nzDisabledTime: any; // tslint:disable-line:no-any

diff --git a/components/date-picker/date-picker.service.ts b/components/date-picker/date-picker.service.ts
@@ -9,7 +9,7 @@
 import { Injectable } from '@angular/core';
 import { CandyDate, cloneDate, CompatibleValue, normalizeRangeValue } from 'ng-zorro-antd/core';
 import { ReplaySubject, Subject } from 'rxjs';
-import { RangePartType } from './standard-types';
+import { CompatibleDate, RangePartType } from './standard-types';
 
 @Injectable()
 export class DatePickerService {
@@ -33,17 +33,32 @@ export class DatePickerService {
     }
   }
 
-  setActiveDate(): void {
+  hasValue(value: CompatibleValue = this.value): boolean {
+    if (Array.isArray(value)) {
+      return !!value[0] && !!value[1];
+    } else {
+      return !!value;
+    }
+  }
+
+  makeValue(value: CompatibleDate): CompatibleValue {
+    if (this.isRange) {
+      return value ? (value as Date[]).map(val => new CandyDate(val)) : [];
+    } else {
+      return value ? new CandyDate(value as Date) : null;
+    }
+  }
+
+  setActiveDate(value: CompatibleValue): void {
     if (this.isRange) {
-      this.activeDate = normalizeRangeValue(this.value as CandyDate[]);
+      this.activeDate = normalizeRangeValue(value as CandyDate[]);
     } else {
-      this.activeDate = cloneDate(this.value);
+      this.activeDate = cloneDate(value);
     }
   }
 
   setValue(value: CompatibleValue): void {
     this.value = value;
-    this.setActiveDate();
     this.valueChange$.next(this.value);
   }
 

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -30,6 +30,7 @@ import { PREFIX_CLASS } from './name';
 
 import { getTimeConfig, isAllowedDate } from './lib/util';
 import {
+  CompatibleDate,
   DisabledDateFn,
   DisabledTimeConfig,
   DisabledTimeFn,
@@ -157,7 +158,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() dropdownClassName: string;
 
   @Input() panelMode: PanelMode | PanelMode[];
-  @Input() value: CompatibleValue;
+  @Input() defaultPickerValue: CompatibleDate;
 
   @Output() readonly panelModeChange = new EventEmitter<PanelMode | PanelMode[]>();
   @Output() readonly calendarChange = new EventEmitter<CompatibleValue>();
@@ -182,7 +183,10 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit(): void {
     // Set panel active date once open
-    this.datePickerService.setActiveDate();
+    const activeDate = this.datePickerService.hasValue()
+      ? this.datePickerService.value
+      : this.datePickerService.makeValue(this.defaultPickerValue);
+    this.datePickerService.setActiveDate(activeDate);
     this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe(value => {
       if (this.isRange) {
         // Re-initialize all related values

diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md
@@ -42,7 +42,6 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | -------- | ----------- | ---- | ------- |
 | `[nzAllowClear]` | Whether to show clear button | `boolean` | `true` |
 | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
-| `[nzClassName]` | picker className | `string` | `''` |
 | `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | `TemplateRef<Date> \| string \| ((d: Date) => TemplateRef<Date> \| string)` | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` |
 | `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - |
@@ -51,7 +50,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzPopupStyle]` | to customize the style of the popup calendar | `object` | `{}` |
 | `[nzDropdownClassName]` | to customize the className of the popup calendar  | `string` | - |
 | `[nzSize]` | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `'large' \| 'small'` | - |
-| `[nzStyle]` | to customize the style of the input box | `object` | `{}` |
+| `[nzDefaultPickerValue]` | default picker date | `Date` \| `Date[]` | - |
 | `(nzOnOpenChange)` | a callback emitter, can be executed whether the popup calendar is popped up or closed | `EventEmitter<boolean>` | - |
 
 ### nz-date-picker
@@ -60,10 +59,10 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | -------- | ----------- | ---- | ------- |
 | `[ngModel]` | Date | `Date` | - |
 | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
-| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy-MM-DD"` |
+| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `'yyyy-MM-DD'` |
 | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef \| string \| (() => TemplateRef \| string)` | - |
 | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) |
-| `[nzShowToday]` | whether to show "Today" button | `boolean` | `true` |
+| `[nzShowToday]` | whether to show 'Today' button | `boolean` | `true` |
 | `[nzPlaceHolder]` | placeholder of date input | `string` | - |
 | `(nzOnOk)` | callback when click ok button | `EventEmitter<Date>` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
@@ -73,7 +72,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[ngModel]` | Date | `Date` | - |
-| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy"` |
+| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `'yyyy'` |
 | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef \| string \| (() => TemplateRef \| string)` | - |
 | `[nzPlaceHolder]` | placeholder of date input | `string` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
@@ -83,7 +82,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[ngModel]` | Date | `Date` | - |
-| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy-MM"` |
+| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `'yyyy-MM'` |
 | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef \| string \| (() => TemplateRef \| string)` | - |
 | `[nzPlaceHolder]` | placeholder of date input | `string` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
@@ -93,7 +92,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[ngModel]` | Date | `Date` | - |
-| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy-ww"` |
+| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `'yyyy-ww'` |
 | `[nzPlaceHolder]` | placeholder of date input | `string` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
 
@@ -103,11 +102,12 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | -------- | ----------- | ---- | ------- |
 | `[ngModel]` | Date | `Date[]` | - |
 | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
-| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `"yyyy-MM-dd"` |
+| `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | `'yyyy-MM-dd'` |
 | `[nzRanges]` | preseted ranges for quick selection | `{ [ key: string ]: Date[] }  \|  { [ key: string ]: () => Date[] }` | - |
 | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef \| string \| (() => TemplateRef \| string)` | - |
 | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) |
 | `[nzPlaceHolder]` | placeholder of date input | `string[]` | - |
+| `[nzSeparator]` | separator | `string` | `'~'` |
 | `(nzOnOk)` | click ok callback | `EventEmitter<Date[]>` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date[]>` | - |
 | `(nzOnCalendarChange)` | The start time or the end time of the range change callback | `EventEmitter<Date[]>` | - |