fix(module:date-picker): nzDefaultOpenValue not work in time panel (#…

…4357) * fix(module:date-picker): `nzDefaultOpenValue` not work * fix: test * chore: do null check in lower component Close #4331
NG-ZORRO · Nov 8, 2019 · dfa3d39 · dfa3d39
1 parent 48d7122
commit dfa3d39
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 16 deletions.
diff --git a/components/calendar/date-table.component.ts b/components/calendar/date-table.component.ts
@@ -12,6 +12,7 @@ import {
   EventEmitter,
   Input,
   OnChanges,
+  OnInit,
   Output,
   SimpleChange,
   SimpleChanges,
@@ -33,7 +34,7 @@ const DATE_COL_NUM = 7;
   exportAs: 'dateTable',
   templateUrl: 'date-table.component.html'
 })
-export class DateTableComponent implements OnChanges {
+export class DateTableComponent implements OnChanges, OnInit {
   _value: CandyDate;
   headWeekDays: WeekDayLabel[];
   weekRows: WeekRow[];
@@ -45,7 +46,8 @@ export class DateTableComponent implements OnChanges {
 
   @Input()
   set value(date: CandyDate) {
-    this._value = this.activeDate = date;
+    // Show today by default
+    this._value = this.activeDate = date || new CandyDate();
   }
 
   get value(): CandyDate {
@@ -63,6 +65,10 @@ export class DateTableComponent implements OnChanges {
 
   constructor(private i18n: NzI18nService, private dateHelper: DateHelperService) {}
 
+  ngOnInit(): void {
+    this.render();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (
       this.isDateRealChange(changes.activeDate) ||

diff --git a/components/date-picker/lib/calendar/calendar-header.component.ts b/components/date-picker/lib/calendar/calendar-header.component.ts
@@ -60,6 +60,7 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
     if (!this.value) {
       this.value = new CandyDate(); // Show today by default
     }
+    this.render();
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/components/date-picker/lib/popups/inner-popup.component.html b/components/date-picker/lib/popups/inner-popup.component.html
@@ -12,7 +12,7 @@
 <ng-container *ngIf="showTimePicker && timeOptions">
   <nz-time-picker-panel
     [nzInDatePicker]="true"
-    [ngModel]="value.nativeDate"
+    [ngModel]="value?.nativeDate"
     (ngModelChange)="onSelectTime($event)"
     [format]="timeOptions.nzFormat"
     [nzHourStep]="timeOptions.nzHourStep"
@@ -25,7 +25,9 @@
     [nzDefaultOpenValue]="timeOptions.nzDefaultOpenValue"
     [nzUse12Hours]="timeOptions.nzUse12Hours"
     [nzAddOn]="timeOptions.nzAddOn"
+    [opened]="true"
   ></nz-time-picker-panel>
+  <!-- use [opened] to trigger time panel `initPosition()` -->
 </ng-container>
 
 <div class="{{ prefixCls }}-body">

diff --git a/components/date-picker/lib/popups/inner-popup.component.ts b/components/date-picker/lib/popups/inner-popup.component.ts
@@ -11,9 +11,7 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
   Output,
-  SimpleChanges,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
@@ -30,7 +28,7 @@ import { DisabledDateFn, PanelMode } from '../../standard-types';
   exportAs: 'innerPopup',
   templateUrl: 'inner-popup.component.html'
 })
-export class InnerPopupComponent implements OnChanges {
+export class InnerPopupComponent {
   @Input() showWeek: boolean;
 
   @Input() locale: NzCalendarI18nInterface;
@@ -56,14 +54,6 @@ export class InnerPopupComponent implements OnChanges {
 
   prefixCls: string = 'ant-calendar';
 
-  constructor() {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value && !this.value) {
-      this.value = new CandyDate();
-    }
-  }
-
   onSelectTime(date: Date): void {
     this.selectTime.emit(new CandyDate(date));
   }

diff --git a/components/date-picker/nz-date-picker.component.spec.ts b/components/date-picker/nz-date-picker.component.spec.ts
@@ -642,6 +642,25 @@ describe('NzDatePickerComponent', () => {
       expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('2018-11-11 00:22:33');
     }));
 
+    it('should support nzShowTime.nzDefaultOpenValue', fakeAsync(() => {
+      fixtureInstance.nzValue = null;
+      fixtureInstance.nzShowTime = { nzDefaultOpenValue: new Date(0, 0, 0, 0, 1, 2) };
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+
+      // Open time picker panel
+      dispatchMouseEvent(queryFromOverlay('.ant-calendar-time-picker-btn'), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      const listOfSelectedLi = overlayContainerElement.querySelectorAll(
+        '.ant-calendar-time-picker-select-option-selected'
+      );
+      expect(listOfSelectedLi[0].textContent!.trim()).toBe('00');
+      expect(listOfSelectedLi[1].textContent!.trim()).toBe('01');
+      expect(listOfSelectedLi[2].textContent!.trim()).toBe('02');
+    }));
+
     it('should not reset time', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2019-08-02 13:03:33');
       fixtureInstance.nzShowTime = true;

diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md
@@ -33,7 +33,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ |
 | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
 | `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | ✅ |
-| `[nzDefaultOpenValue]` | default open panel value | `Date` | `new Date()` |
+| `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` |
 | `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` |
 | `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - |
 | `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - |

diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md
@@ -34,7 +34,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | ✅ |
 | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
 | `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | ✅ |
-| `[nzDefaultOpenValue]` | 设置面板打开时默认选中的值 | `Date` | `new Date()` |
+| `[nzDefaultOpenValue]` | 当 `[ngModel]` 不存在时，可以设置面板打开时默认选中的值 | `Date` | `new Date()` |
 | `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` |
 | `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - |
 | `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - |