feat(module:calendar): sync some changes from ant-design (NG-ZORRO#2769)

components/calendar/demo/basic.ts

@@ -3,10 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-calendar-basic',
   template: `
-    <nz-calendar [(ngModel)]="date" [(nzMode)]="mode"></nz-calendar>
+    <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
   `
 })
 export class NzDemoCalendarBasicComponent {
   date = new Date(2012, 11, 21);
   mode = 'month';
+
+  panelChange(change: {date: Date, mode: string}): void {
+    console.log(change.date, change.mode);
+  }
+
 }

components/calendar/demo/select.ts

@@ -4,9 +4,20 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-calendar-select',
   template: `
     <nz-alert nzMessage="Your selected date: {{ selectedValue | date:'yyyy-MM-dd' }}"></nz-alert>
-    <nz-calendar [(ngModel)]="selectedValue"></nz-calendar>
+    <nz-calendar [(ngModel)]="selectedValue"
+      (nzSelecgChange)="selectChange($event)"
+      (nzValueChange)="valueChange($event)"
+    ></nz-calendar>
   `
 })
 export class NzDemoCalendarSelectComponent {
   selectedValue = new Date('2017-01-25');
+
+  selectChange(select: Date): void {
+    console.log(`Select value: ${select}`);
+  }
+
+  valueChange(value: Date): void {
+    console.log(`Current value: ${value}`);
+  }
 }

components/calendar/doc/index.en-US.md

@@ -26,7 +26,10 @@ registerLocaleData(en);
 <nz-calendar
   [nzDateCell]="dateCellTpl"
   [(ngModel)]="selectedDate"
-  [(nzMode)]="mode">
+  [(nzMode)]="mode"
+  (nzPanelChange)="panelChange($event)"
+  (nzSelectChange)="selectChange($event)"
+  (nzValueChange)="valueChange($event)">
   <!-- Another method for cell definition -->
   <div *nzDateCell>Foo</div>
 </nz-calendar>
@@ -46,3 +49,6 @@ registerLocaleData(en);
 | `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef<Date>` | - |
 | `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
 | `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef<Date>` | - |
+| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month'｜'year' }>` | - |
+| `(nzSelectChange)` | Callback for when a date is selected | `EventEmitter<Date>` | - |
+| `(nzValueChange)` | Callback for when date changes | `EventEmitter<Date>` | - |

components/calendar/doc/index.zh-CN.md

@@ -27,7 +27,10 @@ registerLocaleData(zh);
 <nz-calendar
   [nzDateCell]="dateCellTpl"
   [(ngModel)]="selectedDate"
-  [(nzMode)]="mode">
+  [(nzMode)]="mode"
+  (nzPanelChange)="panelChange($event)"
+  (nzSelectChange)="selectChange($event)"
+  (nzValueChange)="valueChange($event)">
   <!-- 定义 Cell 的另一种方式 -->
   <div *dateCell>Foo</div>
 </nz-calendar>
@@ -47,3 +50,6 @@ registerLocaleData(zh);
 | `[nzDateFullCell]` | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
 | `[nzMonthCell]` | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
 | `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
+| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month'｜'year' }>` | - |
+| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter<Date>` | - |
+| `(nzValueChange)` | 日期变化的回调 | `EventEmitter<Date>` | - |

components/calendar/nz-calendar.component.ts

@@ -19,6 +19,8 @@ import startOfYear from 'date-fns/start_of_year';
 import { NzI18nService as I18n } from '../i18n/nz-i18n.service';
 import { NzDateCellDirective as DateCell, NzDateFullCellDirective as DateFullCell, NzMonthCellDirective as MonthCell, NzMonthFullCellDirective as MonthFullCell } from './nz-calendar-cells';
 
+export type ModeType = 'month' | 'year';
+
 @Component({
   selector: 'nz-calendar',
   templateUrl: './nz-calendar.component.html',
@@ -27,8 +29,11 @@ import { NzDateCellDirective as DateCell, NzDateFullCellDirective as DateFullCel
   ]
 })
 export class NzCalendarComponent implements ControlValueAccessor, OnInit {
-  @Input() nzMode: 'month'|'year' = 'month';
-  @Output() readonly nzModeChange: EventEmitter<'month'|'year'> = new EventEmitter();
+  @Input() nzMode: ModeType = 'month';
+  @Output() readonly nzModeChange: EventEmitter<ModeType> = new EventEmitter();
+  @Output() readonly nzPanelChange: EventEmitter<{date: Date, mode: ModeType}> = new EventEmitter();
+
+  @Output() readonly nzSelectChange: EventEmitter<Date> = new EventEmitter();
 
   @Input() set nzValue(value: Date) { this.updateDate(value, false); }
   @Output() readonly nzValueChange: EventEmitter<Date> = new EventEmitter();
@@ -106,22 +111,26 @@ export class NzCalendarComponent implements ControlValueAccessor, OnInit {
     this.calculateActiveMonth();
   }
 
-  onModeChange(mode: 'month'|'year'): void {
+  onModeChange(mode: ModeType): void {
     this.nzModeChange.emit(mode);
+    this.nzPanelChange.emit({'date': this.activeDate, 'mode': mode});
   }
 
   onDateSelect(date: Date): void {
     this.updateDate(date);
+    this.nzSelectChange.emit(date);
   }
 
   onYearSelect(year: number): void {
     const date = setYear(this.activeDate, year);
     this.updateDate(date);
+    this.nzPanelChange.emit({'date': date, 'mode': this.nzMode});
   }
 
   onMonthSelect(month: number): void {
     const date = setMonth(this.activeDate, month);
     this.updateDate(date);
+    this.nzPanelChange.emit({'date': date, 'mode': this.nzMode});
   }
 
   writeValue(value: Date|null): void {
@@ -142,7 +151,6 @@ export class NzCalendarComponent implements ControlValueAccessor, OnInit {
     const yearChanged = !isSameYear(date, this.activeDate);
 
     this.activeDate = date;
-
     if (dayChanged) {
       this.calculateActiveDate();
     }

components/calendar/nz-calendar.spec.ts

@@ -466,3 +466,18 @@ class NzTestCalendarMonthCellComponent { }
   `
 })
 class NzTestCalendarMonthFullCellComponent { }
+
+@Component({
+  template: `
+    <nz-calendar
+      (nzPanelChange)="panelChange($event)"
+      (nzSelectChange)="selectChange($event)"
+      (nzValueChange)="valueChange($event)">
+    </nz-calendar>
+  `
+})
+class NzTestCalendarBasicComponent {
+  panelChange = jasmine.createSpy('panelChange callback');
+  selectChange = jasmine.createSpy('selectChange callback');
+  valueChange = jasmine.createSpy('valueChange callback');
+}