fix(module:date-picker): click date cell not work when changing month…

… or year (#4876) * fix(module:date-picker): click date not work when changing month Fixes #3499
NG-ZORRO · Apr 2, 2020 · 3aebe7c · 3aebe7c
1 parent 2f400e8
commit 3aebe7c
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 164 deletions.
diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
@@ -80,7 +80,6 @@ export class CalendarFooterComponent implements OnChanges {
   @Input() hasTimePicker: boolean = false;
   @Input() isRange: boolean = false;
 
-  @Input() timePickerDisabled: boolean = false;
   @Input() okDisabled: boolean = false;
   @Input() disabledDate: (d: Date) => boolean;
   @Input() extraFooter: TemplateRef<void> | string;

diff --git a/components/date-picker/date-picker.component.html b/components/date-picker/date-picker.component.html
@@ -4,7 +4,6 @@
   [open]="nzOpen"
   [separator]="nzSeparator"
   [disabled]="nzDisabled"
-  [disabledDate]="nzDisabledDate"
   [format]="nzFormat"
   [allowClear]="nzAllowClear"
   [autoFocus]="nzAutoFocus"

diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -387,6 +387,29 @@ describe('NzDatePickerComponent', () => {
   describe('panel switch and move forward/afterward', () => {
     beforeEach(() => (fixtureInstance.useSuite = 1));
 
+    it('should support date panel changes on click month', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2018-11-11');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      // Click month
+      dispatchMouseEvent(queryFromOverlay('.ant-picker-header-month-btn'), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      dispatchMouseEvent(getFirstCell(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      // click 2018-01-01
+      dispatchMouseEvent(getFirstCell(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).value).toBe('2018-01-01');
+    }));
+
     it('should support date panel changes', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2018-11-11');
       fixture.detectChanges();
@@ -585,10 +608,10 @@ describe('NzDatePickerComponent', () => {
 
     it('should support nzShowTime', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2018-11-11 11:22:33');
-      fixtureInstance.nzShowTime = true;
+      // tslint:disable-next-line:no-any
+      fixtureInstance.nzShowTime = '' as any;
       fixture.detectChanges();
       openPickerByClickTrigger();
-      // Why need one more detectChange ?
       flush();
       fixture.detectChanges();
       expect(queryFromOverlay('.ant-picker-ok')).toBeDefined();
@@ -627,10 +650,10 @@ describe('NzDatePickerComponent', () => {
       fixtureInstance.nzValue = new Date('2019-08-02 13:03:33');
       fixtureInstance.nzShowTime = true;
       fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
       openPickerByClickTrigger();
-
       dispatchMouseEvent(getFirstCell(), 'click');
-
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
@@ -678,6 +701,35 @@ describe('NzDatePickerComponent', () => {
       expect(+queryFromOverlay('.ant-picker-time-panel-column:nth-child(3) li:first-child').textContent!.trim()).toBe(1);
     }));
 
+    it('should nzDisabledTime invalid input not emit', fakeAsync(() => {
+      fixtureInstance.nzShowTime = true;
+      fixtureInstance.nzDisabledTime = () => {
+        return {
+          nzDisabledHours: () => [0, 1, 2],
+          nzDisabledMinutes: () => [0, 1],
+          nzDisabledSeconds: () => [0]
+        };
+      };
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+
+      // input disabled value
+      const input = getPickerInput(fixture.debugElement);
+      typeInElement('2020-03-14 00:00:00', input);
+      fixture.detectChanges();
+      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerContainer()).not.toBeNull();
+
+      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).value).toBe('');
+    }));
+
     it('should support nzRenderExtraFooter', fakeAsync(() => {
       fixtureInstance.nzRenderExtraFooter = () => fixtureInstance.tplExtraFooter;
       fixture.detectChanges();
@@ -807,24 +859,6 @@ describe('NzDatePickerComponent', () => {
     }));
   });
 
-  // describe('AbstractPicker', () => {
-  //   beforeEach(() => {
-  //     const fakeCdr = { markForCheck: () => void 0 };
-  //     componentInstance = new (AbstractPickerComponent as any)(i18n, fakeCdr); // tslint:disable-line:no-any
-  //   });
-  //
-  //   it('should cover untouched branches', () => {
-  //     // onOpenChange
-  //     const emit = spyOn(componentInstance.nzOnOpenChange, 'emit');
-  //     componentInstance.onOpenChange(true);
-  //     expect(emit).toHaveBeenCalled();
-  //
-  //     // setDisabledState
-  //     componentInstance.setDisabledState(true);
-  //     expect(componentInstance.nzDisabled).toBeTruthy();
-  //   });
-  // }); // /AbstractPicker
-
   ////////////
 
   function getPickerContainer(): HTMLElement {

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -29,7 +29,7 @@ import { warnDeprecation } from 'ng-zorro-antd/core/logger';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { CandyDate, cloneDate, CompatibleValue } from 'ng-zorro-antd/core/time';
 import { FunctionProp, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
-import { InputBoolean, valueFunctionProp } from 'ng-zorro-antd/core/util';
+import { InputBoolean, toBoolean, valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzDatePickerI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -70,6 +70,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
 
   protected destroyed$: Subject<void> = new Subject();
   protected isCustomPlaceHolder: boolean = false;
+  private showTime: SupportTimeOptions | boolean;
 
   // --- Common API
   @Input() @InputBoolean() nzAllowClear: boolean = true;
@@ -98,7 +99,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   @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[]>();
@@ -108,6 +108,14 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
 
   @ViewChild(NzPickerComponent, { static: true }) protected picker: NzPickerComponent;
 
+  @Input() get nzShowTime(): SupportTimeOptions | boolean {
+    return this.showTime;
+  }
+
+  set nzShowTime(value: SupportTimeOptions | 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
@@ -143,7 +151,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
     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) {

diff --git a/components/date-picker/date-picker.service.ts b/components/date-picker/date-picker.service.ts
@@ -41,7 +41,7 @@ export class DatePickerService {
     }
   }
 
-  makeValue(value: CompatibleDate): CompatibleValue {
+  makeValue(value: CompatibleDate | null): CompatibleValue {
     if (this.isRange) {
       return value ? (value as Date[]).map(val => new CandyDate(val)) : [];
     } else {