diff --git a/components/calendar/demo/basic.ts b/components/calendar/demo/basic.ts
index 50235922a74..d86333b5e6e 100644
--- a/components/calendar/demo/basic.ts
+++ b/components/calendar/demo/basic.ts
@@ -3,10 +3,15 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-calendar-basic',
template: `
-
+
`
})
export class NzDemoCalendarBasicComponent {
date = new Date(2012, 11, 21);
mode = 'month';
+
+ panelChange(change: {date: Date, mode: string}): void {
+ console.log(change.date, change.mode);
+ }
+
}
diff --git a/components/calendar/demo/select.ts b/components/calendar/demo/select.ts
index 6d9815637d0..03587b48b46 100644
--- a/components/calendar/demo/select.ts
+++ b/components/calendar/demo/select.ts
@@ -4,9 +4,20 @@ import { Component } from '@angular/core';
selector: 'nz-demo-calendar-select',
template: `
-
+
`
})
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}`);
+ }
}
diff --git a/components/calendar/doc/index.en-US.md b/components/calendar/doc/index.en-US.md
index ba55483357a..8a8b981562b 100644
--- a/components/calendar/doc/index.en-US.md
+++ b/components/calendar/doc/index.en-US.md
@@ -26,7 +26,10 @@ registerLocaleData(en);
+ [(nzMode)]="mode"
+ (nzPanelChange)="panelChange($event)"
+ (nzSelectChange)="selectChange($event)"
+ (nzValueChange)="valueChange($event)">
Foo
@@ -46,3 +49,6 @@ registerLocaleData(en);
| `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef` | - |
| `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef` | - |
| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef` | - |
+| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month'|'year' }>` | - |
+| `(nzSelectChange)` | Callback for when a date is selected | `EventEmitter` | - |
+| `(nzValueChange)` | Callback for when date changes | `EventEmitter` | - |
diff --git a/components/calendar/doc/index.zh-CN.md b/components/calendar/doc/index.zh-CN.md
index aa8f07eb601..e712d6cf5c0 100644
--- a/components/calendar/doc/index.zh-CN.md
+++ b/components/calendar/doc/index.zh-CN.md
@@ -27,7 +27,10 @@ registerLocaleData(zh);
+ [(nzMode)]="mode"
+ (nzPanelChange)="panelChange($event)"
+ (nzSelectChange)="selectChange($event)"
+ (nzValueChange)="valueChange($event)">
Foo
@@ -47,3 +50,6 @@ registerLocaleData(zh);
| `[nzDateFullCell]` | (可作为内容)自定义渲染日期单元格,模版内容覆盖单元格 | `TemplateRef` | - |
| `[nzMonthCell]` | (可作为内容)自定义渲染月单元格,模版内容会被追加到单元格 | `TemplateRef` | - |
| `[nzMonthFullCell]` | (可作为内容)自定义渲染月单元格,模版内容覆盖单元格 | `TemplateRef` | - |
+| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month'|'year' }>` | - |
+| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter` | - |
+| `(nzValueChange)` | 日期变化的回调 | `EventEmitter` | - |
diff --git a/components/calendar/nz-calendar.component.ts b/components/calendar/nz-calendar.component.ts
index f1a91c90e76..9fdc0e8513d 100644
--- a/components/calendar/nz-calendar.component.ts
+++ b/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 = new EventEmitter();
+ @Output() readonly nzPanelChange: EventEmitter<{date: Date, mode: ModeType}> = new EventEmitter();
+
+ @Output() readonly nzSelectChange: EventEmitter = new EventEmitter();
@Input() set nzValue(value: Date) { this.updateDate(value, false); }
@Output() readonly nzValueChange: EventEmitter = 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 {
diff --git a/components/calendar/nz-calendar.spec.ts b/components/calendar/nz-calendar.spec.ts
index 1b15c9c482e..21ee53f324c 100644
--- a/components/calendar/nz-calendar.spec.ts
+++ b/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;
+ 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: `
+
+
+ `
+})
+class NzTestCalendarChangesComponent {
+ mode: 'month'|'year' = 'month';
+ panelChange = jasmine.createSpy('panelChange callback');
+ selectChange = jasmine.createSpy('selectChange callback');
+}