feat(module:date-picker): support nzOnCalendarChange (#3169)

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

@@ -299,6 +299,7 @@ describe('NzDatePickerComponent', () => {
     it('should support nzOnChange', fakeAsync(() => {
       fixtureInstance.nzValue = new Date('2018-11-11');
       const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
+      const nzOnCalendarChange = spyOn(fixtureInstance, 'nzOnCalendarChange');
       fixture.detectChanges();
       dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
       fixture.detectChanges();
@@ -312,7 +313,8 @@ describe('NzDatePickerComponent', () => {
       tick(500);
       fixture.detectChanges();
       expect(nzOnChange).toHaveBeenCalled();
-      const result = nzOnChange.calls.allArgs()[0][0];
+      expect(nzOnCalendarChange).not.toHaveBeenCalled();
+      const result = nzOnChange.calls.allArgs()[ 0 ][ 0 ];
       expect(result.getDate()).toBe(+cellText);
     }));
   });
@@ -812,6 +814,7 @@ describe('NzDatePickerComponent', () => {
         [nzShowToday]="nzShowToday"
         [nzMode]="nzMode"
         (nzOnPanelChange)="nzOnPanelChange($event)"
+        (nzOnCalendarChange)="nzOnCalendarChange($event)"
         [nzShowTime]="nzShowTime"
         (nzOnOk)="nzOnOk($event)"
       ></nz-date-picker>
@@ -849,9 +852,9 @@ class NzTestDatePickerComponent {
   nzSize: string;
   nzStyle: NGStyleInterface;
 
-  nzOnOpenChange(): void {}
-
   nzOnChange(): void {}
+  nzOnCalendarChange(): void {}
+  nzOnOpenChange(): void {}
 
   nzValue: Date | null;
 

components/date-picker/date-range-picker.component.html

@@ -21,6 +21,7 @@
     (panelModeChange)="nzOnPanelChange.emit($event)"
     [value]="nzValue"
     (valueChange)="onValueChange($event)"
+    (calendarChange)="onCalendarChange($event)"
     [locale]="nzLocale?.lang"
     [showToday]="realShowToday"
     [showTime]="nzShowTime"

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

@@ -33,6 +33,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
   @Input() nzMode: PanelMode | PanelMode[];
   @Input() nzRanges: FunctionProp<PresetRanges>;
   @Output() readonly nzOnPanelChange = new EventEmitter<PanelMode | PanelMode[]>();
+  @Output() readonly nzOnCalendarChange = new EventEmitter<Date[]>();
 
   private _showTime: object | boolean;
   @Input() get nzShowTime(): object | boolean {
@@ -99,6 +100,14 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
     }
   }
 
+  // Emit nzOnCalendarChange when select date by nz-range-picker
+  onCalendarChange(value: CandyDate[]): void {
+    if (this.isRange) {
+      const rangeValue = value.map(x => x.nativeDate);
+      this.nzOnCalendarChange.emit(rangeValue);
+    }
+  }
+
   // Emitted when done with date selecting
   onResultOk(): void {
     if (this.isRange) {

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

@@ -106,9 +106,9 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzPlaceHolder]` | placeholder of date input | `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[]>` | - |
 > Currently supported `nz-time-picker` parameters in `nzShowTime` are: `nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn`
 
 ### nzFormat special instructions
 
-Date formatting currently supports two methods: `DatePipe` (default, [syntax reference](https://angular.io/api/common/DatePipe)) and `Date-fns` ([syntax reference](https://date-fns.org/docs/format#description), see [`How to format a date using Date-fns`](/docs/i18n/en#How%20to%20format%20a%20date%20using%20Date-fns)).
+Date formatting currently supports two methods: `DatePipe` (default, [syntax reference](https://angular.io/api/common/DatePipe)) and `Date-fns` ([syntax reference](https://date-fns.org/docs/format#description), see [`How to format a date using Date-fns`](/docs/i18n/en#How%20to%20format%20a%20date%20using%20Date-fns)).

components/date-picker/doc/index.zh-CN.md

@@ -106,6 +106,7 @@ registerLocaleData(zh);
 | `[nzPlaceHolder]` | 输入框提示文字 | `string[]` | - |
 | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter<Date[]>` | - |
 | `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date[]>` | - |
+| `(nzOnCalendarChange)` | 待选日期发生变化的回调 | `EventEmitter<Date[]>` | - |
 
 > `nzShowTime` 中当前支持的 `nz-time-picker` 参数有：`nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn`
 

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

@@ -52,6 +52,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
   @Input() panelMode: PanelMode | PanelMode[];
   @Output() readonly panelModeChange = new EventEmitter<PanelMode | PanelMode[]>();
 
+  @Output() readonly calendarChange = new EventEmitter<CandyDate | CandyDate[]>();
   @Input() value: CandyDate | CandyDate[] | null;
   @Output() readonly valueChange = new EventEmitter<CandyDate | CandyDate[]>();
 
@@ -182,15 +183,16 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
 
       if ((!left && !right) || (left && right)) {
         // If totally full or empty, clean up && re-assign left first
-        this.hoverValue = this.selectedValue = [value];
+        this.hoverValue = this.selectedValue = [ value ];
+        this.calendarChange.emit([value.clone()]);
       } else if (left && !right) {
         // If one of them is empty, assign the other one and sort, then set the final values
         this.clearHoverValue(); // Clean up
         this.setRangeValue('selectedValue', 'right', value);
         this.sortRangeValue('selectedValue'); // Sort
-
         this.valueForRangeShow = this.normalizeRangeValue(this.selectedValue);
         this.setValue(this.cloneRangeDate(this.selectedValue));
+        this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
       }
     } else {
       this.setValue(value);

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

@@ -238,6 +238,31 @@ describe('NzRangePickerComponent', () => {
       expect(getFirstSelectedDayCell().textContent!.trim()).toBe('11');
     }));
 
+    it('should support nzOnCalendarChange', fakeAsync(() => {
+      const nzOnCalendarChange = spyOn(fixtureInstance, 'nzOnCalendarChange');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      const left = getFirstCell('left');
+      const leftText = left.textContent!.trim();
+      dispatchMouseEvent(left, 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(nzOnCalendarChange).toHaveBeenCalled();
+      let result = nzOnCalendarChange.calls.allArgs()[0][0];
+      expect(result[0].getDate()).toBe(+leftText);
+      const right = getFirstCell('right');
+      const rightText = right.textContent!.trim();
+      dispatchMouseEvent(right, 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(nzOnCalendarChange).toHaveBeenCalled();
+      result = nzOnCalendarChange.calls.allArgs()[1][0];
+      expect(result[0].getDate()).toBe(+leftText);
+      expect(result[1].getDate()).toBe(+rightText);
+    }));
+
     it('should support nzOnChange', fakeAsync(() => {
       fixtureInstance.modelValue = [new Date('2018-11-11'), new Date('2018-11-11')];
       const nzOnChange = spyOn(fixtureInstance, 'modelValueChange');
@@ -718,6 +743,7 @@ describe('NzRangePickerComponent', () => {
         [nzMode]="nzMode"
         [nzRanges]="nzRanges"
         (nzOnPanelChange)="nzOnPanelChange($event)"
+        (nzOnCalendarChange)="nzOnCalendarChange($event)"
         [nzShowTime]="nzShowTime"
         (nzOnOk)="nzOnOk($event)"
       ></nz-range-picker>
@@ -767,6 +793,7 @@ class NzTestRangePickerComponent {
 
   nzRanges: any; // tslint:disable-line:no-any
   nzOnPanelChange(): void {}
+  nzOnCalendarChange(): void {}
   nzOnOk(): void {}
 
   // --- Suite 2