feat(module:calendar): sync some changes from ant-design (#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

@@ -20,6 +20,8 @@ import { DateHelperService } from '../i18n/date-helper.service';
 import { NzI18nService } 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({
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,8 +32,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();
@@ -108,22 +113,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 {

components/calendar/nz-calendar.spec.ts

@@ -28,7 +28,8 @@ describe('Calendar', () => {
         NzTestCalendarDateCellComponent,
         NzTestCalendarDateFullCellComponent,
         NzTestCalendarMonthCellComponent,
-        NzTestCalendarMonthFullCellComponent
+        NzTestCalendarMonthFullCellComponent,
+        NzTestCalendarChangesComponent
       ],
       providers: [ { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 0 } } ]
     }).compileComponents();
@@ -379,6 +380,42 @@ describe('Calendar', () => {
       expect(content.nativeElement.textContent.trim()).toBe('Bar');
     });
   });
+
+  describe('changes', () => {
+    let fixture: ComponentFixture<NzTestCalendarChangesComponent>;
+    let component: NzTestCalendarChangesComponent;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(NzTestCalendarChangesComponent);
+      component = fixture.componentInstance;
+    }));
+
+    it('should panelChange work', fakeAsync(() => {
+      fixture.detectChanges();
+
+      expect(component.panelChange).toHaveBeenCalledTimes(0);
+
+      const calendar = fixture.debugElement.queryAll(By.directive(Calendar))[0].injector.get(Calendar);
+      calendar.onModeChange('year');
+      fixture.detectChanges();
+
+      expect(component.panelChange).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should selectChange work', () => {
+      fixture.detectChanges();
+      const now = new Date();
+
+      expect(component.panelChange).toHaveBeenCalledTimes(0);
+
+      const calendar = fixture.debugElement.queryAll(By.directive(Calendar))[0].injector.get(Calendar);
+      calendar.onDateSelect(now);
+      fixture.detectChanges();
+
+      expect(component.selectChange).toHaveBeenCalledTimes(1);
+    });
+  });
+
 });
 
 @Component({
@@ -461,3 +498,18 @@ class NzTestCalendarMonthCellComponent { }
   `
 })
 class NzTestCalendarMonthFullCellComponent { }
+
+@Component({
+  template: `
+    <nz-calendar
+      [(nzMode)]="mode"
+      (nzPanelChange)="panelChange($event)"
+      (nzSelectChange)="selectChange($event)">
+    </nz-calendar>
+  `
+})
+class NzTestCalendarChangesComponent {
+  mode: 'month'|'year' = 'month';
+  panelChange = jasmine.createSpy('panelChange callback');
+  selectChange = jasmine.createSpy('selectChange callback');
+}