feat(module:datepicker): send event emitter when panel mode change (#8685)

Author: Nicoss54

components/date-picker/date-picker.component.spec.ts

@@ -28,6 +28,7 @@ import { NzFormModule } from '../form';
 import en_US from '../i18n/languages/en_US';
 import { NzDatePickerComponent } from './date-picker.component';
 import { NzDatePickerModule } from './date-picker.module';
+import { NzPanelChangeType } from './standard-types';
 import { ENTER_EVENT, getPickerAbstract, getPickerInput } from './testing/util';
 import { PREFIX_CLASS } from './util';
 
@@ -1129,6 +1130,7 @@ describe('NzDatePickerComponent', () => {
     }));
 
     it('should support nzOnPanelChange', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2020-12-01');
       spyOn(fixtureInstance, 'nzOnPanelChange');
       fixture.detectChanges();
       openPickerByClickTrigger();
@@ -1138,7 +1140,58 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
-      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith('month');
+      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith({ mode: 'month', date: new Date('2020-12-01') });
+    }));
+
+    it('should support nzOnPanelChange when next button is clicked', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2020-11-01');
+      spyOn(fixtureInstance, 'nzOnPanelChange');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      dispatchMouseEvent(getNextBtn(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith({ mode: 'date', date: new Date('2020-12-01') });
+    }));
+    it('should support nzOnPanelChange when super next button is clicked', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2020-11-01');
+      spyOn(fixtureInstance, 'nzOnPanelChange');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      dispatchMouseEvent(getSuperNextBtn(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith({ mode: 'date', date: new Date('2021-11-01') });
+    }));
+    it('should support nzOnPanelChange when previous button is clicked', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2020-11-01 11:22:33');
+      spyOn(fixtureInstance, 'nzOnPanelChange');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      dispatchMouseEvent(getPreBtn(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith({
+        mode: 'date',
+        date: new Date('2020-10-01 11:22:33')
+      });
+    }));
+    it('should support nzOnPanelChange when super previous button is clicked', fakeAsync(() => {
+      fixtureInstance.nzValue = new Date('2020-11-01 11:22:33');
+      spyOn(fixtureInstance, 'nzOnPanelChange');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      dispatchMouseEvent(getSuperPreBtn(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(fixtureInstance.nzOnPanelChange).toHaveBeenCalledWith({
+        mode: 'date',
+        date: new Date('2019-11-01 11:22:33')
+      });
     }));
 
     it('should support nzOnOk', fakeAsync(() => {
@@ -1487,7 +1540,9 @@ class NzTestDatePickerComponent {
   nzSize!: string;
 
   nzOnChange(_: Date | null): void {}
+
   nzOnCalendarChange(): void {}
+
   nzOnOpenChange(_: boolean): void {}
 
   nzValue: Date | null = null;
@@ -1507,7 +1562,7 @@ class NzTestDatePickerComponent {
   nzShowWeekNumber = false;
 
   // nzRanges;
-  nzOnPanelChange(_: string): void {}
+  nzOnPanelChange(_: NzPanelChangeType): void {}
 
   nzOnOk(_: Date): void {}
 
@@ -1547,5 +1602,6 @@ class NzTestDatePickerInFormComponent {
   validateForm = this.fb.group({
     demo: this.fb.control<Date | null>(null, Validators.required)
   });
+
   constructor(private fb: FormBuilder) {}
 }

components/date-picker/date-picker.component.ts

@@ -17,11 +17,14 @@ import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  forwardRef,
+  inject,
   Input,
   NgZone,
   OnChanges,
@@ -33,10 +36,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewChildren,
-  ViewEncapsulation,
-  booleanAttribute,
-  forwardRef,
-  inject
+  ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, of as observableOf } from 'rxjs';
@@ -50,7 +50,7 @@ import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { DATE_PICKER_POSITION_MAP, DEFAULT_DATE_PICKER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/overlay';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { CandyDate, CompatibleValue, cloneDate, wrongSortOrder } from 'ng-zorro-antd/core/time';
+import { CandyDate, cloneDate, CompatibleValue, wrongSortOrder } from 'ng-zorro-antd/core/time';
 import {
   BooleanInput,
   FunctionProp,
@@ -76,6 +76,7 @@ import {
   CompatibleDate,
   DisabledTimeFn,
   NzDateMode,
+  NzPanelChangeType,
   PresetRanges,
   RangePartType,
   SupportTimeOptions
@@ -323,8 +324,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
   @Input() nzPlacement: NzPlacement = 'bottomLeft';
   @Input({ transform: booleanAttribute }) nzShowWeekNumber: boolean = false;
 
-  // TODO(@wenqi73) The PanelMode need named for each pickers and export
-  @Output() readonly nzOnPanelChange = new EventEmitter<NzDateMode | NzDateMode[] | string | string[]>();
+  @Output() readonly nzOnPanelChange = new EventEmitter<NzPanelChangeType>();
   @Output() readonly nzOnCalendarChange = new EventEmitter<Array<Date | null>>();
   @Output() readonly nzOnOk = new EventEmitter<CompatibleDate | null>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
@@ -868,8 +868,8 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
     }
   }
 
-  onPanelModeChange(panelMode: NzDateMode | NzDateMode[]): void {
-    this.nzOnPanelChange.emit(panelMode);
+  onPanelModeChange(panelChange: NzPanelChangeType): void {
+    this.nzOnPanelChange.emit(panelChange);
   }
 
   // Emit nzOnCalendarChange when select date by nz-range-picker

components/date-picker/date-range-popup.component.ts

@@ -45,6 +45,7 @@ import {
   DisabledTimeFn,
   DisabledTimePartial,
   NzDateMode,
+  NzPanelChangeType,
   PresetRanges,
   RangePartType,
   SupportTimeOptions
@@ -98,7 +99,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
           [showTimePicker]="hasTimePicker"
           [timeOptions]="getTimeOptions(partType)"
           [panelMode]="getPanelMode(panelMode, partType)"
-          (panelModeChange)="onPanelModeChange($event, partType)"
+          (panelChange)="onPanelModeChange($event, partType)"
           [activeDate]="getActiveDate(partType)"
           [value]="getValue(partType)"
           [disabledDate]="disabledDate"
@@ -164,7 +165,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() defaultPickerValue!: CompatibleDate | undefined | null;
   @Input() dir: Direction = 'ltr';
 
-  @Output() readonly panelModeChange = new EventEmitter<NzDateMode | NzDateMode[]>();
+  @Output() readonly panelModeChange = new EventEmitter<NzPanelChangeType>();
   @Output() readonly calendarChange = new EventEmitter<CompatibleValue>();
   @Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting
 
@@ -270,18 +271,22 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  onPanelModeChange(mode: NzDateMode, partType?: RangePartType): void {
+  onPanelModeChange(panelChangeEvent: NzPanelChangeType, partType?: RangePartType): void {
     if (this.isRange) {
       const index = this.datePickerService.getActiveIndex(partType);
       if (index === 0) {
-        this.panelMode = [mode, this.panelMode[1]] as NzDateMode[];
+        this.panelMode = [panelChangeEvent.mode, this.panelMode[1]] as [NzDateMode, NzDateMode];
       } else {
-        this.panelMode = [this.panelMode[0], mode] as NzDateMode[];
+        this.panelMode = [this.panelMode[0], panelChangeEvent.mode] as [NzDateMode, NzDateMode];
       }
+      this.panelModeChange.emit({
+        mode: this.panelMode as [NzDateMode, NzDateMode],
+        date: (this.datePickerService.activeDate as SingleValue[]).map(d => d!.nativeDate) as [Date, Date]
+      });
     } else {
-      this.panelMode = mode;
+      this.panelMode = panelChangeEvent.mode as NzDateMode;
+      this.panelModeChange.emit({ mode: this.panelMode as NzDateMode, date: panelChangeEvent.date as Date });
     }
-    this.panelModeChange.emit(this.panelMode);
   }
 
   onActiveDateChange(value: CandyDate, partType: RangePartType): void {

components/date-picker/doc/index.en-US.md

@@ -23,8 +23,9 @@ provided in the file of `app.module.ts`.
 For example:
 
 ```typescript
-import {registerLocaleData} from '@angular/common';
+import { registerLocaleData } from '@angular/common';
 import en from '@angular/common/locales/en';
+
 registerLocaleData(en);
 ```
 
@@ -60,6 +61,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | `[nzBorderless]`         | remove the border                                                                                                                  | `boolean`                                                  | `false`                                                                                                    | -             |
 | `[nzInline]`             | inline mode                                                                                                                        | `boolean`                                                  | `false`                                                                                                    | -             |
 | `(nzOnOpenChange)`       | a callback emitter, can be executed whether the popup calendar is popped up or closed                                              | `EventEmitter<boolean>`                                    | -                                                                                                          | -             |
+| `(nzOnPanelChange)`      | a callback emitter, can be executed when the panel changes                                                                         | `EventEmitter<NzPanelChangeType>`                          | -                                                                                                          | -             |
 
 ### Common Methods
 
@@ -104,8 +106,9 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean`                                                                                                 | `false`                                              |
 | `(nzOnOk)`           | click ok callback                                                                                                  | `EventEmitter<Date[]>`                                                                                    | -                                                    |
 
-> Currently, supported `nz-time-picker` parameters in `nzShowTime`
-> are: `nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn`
+> Currently, supported `nz-time-picker` parameters in `nzShowTime` are: `nzFormat`, `nzHourStep`, `nzMinuteStep`,
+`nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`,
+`nzDefaultOpenValue`, `nzAddOn`
 
 ## FAQ
 

components/date-picker/inner-popup.component.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -12,8 +13,7 @@ import {
   Output,
   SimpleChanges,
   TemplateRef,
-  ViewEncapsulation,
-  booleanAttribute
+  ViewEncapsulation
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -23,7 +23,7 @@ import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
 import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 import { LibPackerModule } from './lib';
-import { DisabledDateFn, NzDateMode, RangePartType, SupportTimeOptions } from './standard-types';
+import { DisabledDateFn, NzDateMode, NzPanelChangeType, RangePartType, SupportTimeOptions } from './standard-types';
 import { PREFIX_CLASS } from './util';
 
 @Component({
@@ -44,7 +44,7 @@ import { PREFIX_CLASS } from './util';
               [showSuperNextBtn]="enablePrevNext('next', 'decade')"
               [showNextBtn]="false"
               [showPreBtn]="false"
-              (panelModeChange)="panelModeChange.emit($event)"
+              (panelChange)="panelChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             />
             <div class="{{ prefixCls }}-body">
@@ -65,7 +65,7 @@ import { PREFIX_CLASS } from './util';
               [showSuperNextBtn]="enablePrevNext('next', 'year')"
               [showNextBtn]="false"
               [showPreBtn]="false"
-              (panelModeChange)="panelModeChange.emit($event)"
+              (panelChange)="panelChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             />
             <div class="{{ prefixCls }}-body">
@@ -89,7 +89,7 @@ import { PREFIX_CLASS } from './util';
               [showSuperNextBtn]="enablePrevNext('next', 'month')"
               [showNextBtn]="false"
               [showPreBtn]="false"
-              (panelModeChange)="panelModeChange.emit($event)"
+              (panelChange)="panelChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             />
             <div class="{{ prefixCls }}-body">
@@ -113,7 +113,7 @@ import { PREFIX_CLASS } from './util';
               [showSuperNextBtn]="enablePrevNext('next', 'month')"
               [showNextBtn]="false"
               [showPreBtn]="false"
-              (panelModeChange)="panelModeChange.emit($event)"
+              (panelChange)="panelChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             />
             <div class="{{ prefixCls }}-body">
@@ -140,7 +140,7 @@ import { PREFIX_CLASS } from './util';
               "
               [showPreBtn]="panelMode === 'week' ? enablePrevNext('prev', 'week') : enablePrevNext('prev', 'date')"
               [showNextBtn]="panelMode === 'week' ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')"
-              (panelModeChange)="panelModeChange.emit($event)"
+              (panelChange)="panelChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             />
             <div class="{{ prefixCls }}-body">
@@ -199,7 +199,7 @@ export class InnerPopupComponent implements OnChanges {
   @Input() value!: CandyDate;
   @Input() partType!: RangePartType;
 
-  @Output() readonly panelModeChange = new EventEmitter<NzDateMode>();
+  @Output() readonly panelChange = new EventEmitter<NzPanelChangeType>();
   // TODO: name is not proper
   @Output() readonly headerChange = new EventEmitter<CandyDate>(); // Emitted when user changed the header's value
   @Output() readonly selectDate = new EventEmitter<CandyDate>(); // Emitted when the date is selected by click the date panel
@@ -247,7 +247,7 @@ export class InnerPopupComponent implements OnChanges {
       this.selectDate.emit(value);
     } else {
       this.headerChange.emit(value);
-      this.panelModeChange.emit(this.endPanelMode);
+      this.panelChange.emit({ mode: this.endPanelMode, date: value.nativeDate });
     }
   }
 
@@ -264,7 +264,7 @@ export class InnerPopupComponent implements OnChanges {
       this.selectDate.emit(value);
     } else {
       this.headerChange.emit(value);
-      this.panelModeChange.emit(this.endPanelMode);
+      this.panelChange.emit({ mode: this.endPanelMode, date: value.nativeDate });
     }
   }
 
@@ -275,7 +275,7 @@ export class InnerPopupComponent implements OnChanges {
       this.selectDate.emit(value);
     } else {
       this.headerChange.emit(value);
-      this.panelModeChange.emit('year');
+      this.panelChange.emit({ mode: 'year', date: value.nativeDate });
     }
   }