fix(module:calendar): fix calendar year list (NG-ZORRO#2140)

close NG-ZORRO#2091
hsuanxyz · Sep 17, 2018 · a33e25c · a33e25c
1 parent cfca253
commit a33e25c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/components/calendar/nz-calendar-header.component.html b/components/calendar/nz-calendar-header.component.html
@@ -1,5 +1,5 @@
 <nz-select class="ant-fullcalendar-year-select" [nzSize]="size" [nzDropdownMatchSelectWidth]="false"
-           [ngModel]="activeYear" (ngModelChange)="yearChange.emit($event)">
+           [ngModel]="activeYear" (ngModelChange)="updateYear($event)">
   <nz-option *ngFor="let year of years" [nzLabel]="year.label" [nzValue]="year.value"></nz-option>
 </nz-select>
 

diff --git a/components/calendar/nz-calendar-header.component.ts b/components/calendar/nz-calendar-header.component.ts
@@ -3,16 +3,16 @@ import * as setMonth from 'date-fns/set_month';
 import { NzI18nService as I18n } from '../i18n/nz-i18n.service';
 
 @Component({
-  selector: 'nz-calendar-header',
+  selector   : 'nz-calendar-header',
   templateUrl: './nz-calendar-header.component.html',
-  host: {
-    '[style.display]': `'block'`,
+  host       : {
+    '[style.display]'                : `'block'`,
     '[class.ant-fullcalendar-header]': `true`
   }
 })
 export class NzCalendarHeaderComponent implements OnInit {
-  @Input() mode: 'month'|'year' = 'month';
-  @Output() modeChange: EventEmitter<'month'|'year'> = new EventEmitter();
+  @Input() mode: 'month' | 'year' = 'month';
+  @Output() modeChange: EventEmitter<'month' | 'year'> = new EventEmitter();
 
   @Input() fullscreen: boolean = true;
   @Input() activeDate: Date = new Date();
@@ -22,8 +22,8 @@ export class NzCalendarHeaderComponent implements OnInit {
 
   yearOffset: number = 10;
   yearTotal: number = 20;
-  years: Array<{label: string, value: number}>;
-  months: Array<{label: string, value: number}>;
+  years: Array<{ label: string, value: number }>;
+  months: Array<{ label: string, value: number }>;
 
   get activeYear(): number {
     return this.activeDate.getFullYear();
@@ -47,20 +47,26 @@ export class NzCalendarHeaderComponent implements OnInit {
 
   private prefixCls = 'ant-fullcalendar';
 
-  constructor(private i18n: I18n) { }
+  constructor(private i18n: I18n) {
+  }
 
   ngOnInit(): void {
     this.setUpYears();
     this.setUpMonths();
   }
 
-  private setUpYears(): void {
-    const start = this.activeYear - this.yearOffset;
+  updateYear(year: number): void {
+    this.yearChange.emit(year);
+    this.setUpYears(year);
+  }
+
+  private setUpYears(year?: number): void {
+    const start = (year || this.activeYear) - this.yearOffset;
     const end = start + this.yearTotal;
 
     this.years = [];
     for (let i = start; i < end; i++) {
-      this.years.push({label: `${i}`, value: i});
+      this.years.push({ label: `${i}`, value: i });
     }
   }
 
@@ -70,7 +76,7 @@ export class NzCalendarHeaderComponent implements OnInit {
     for (let i = 0; i < 12; i++) {
       const dateInMonth = setMonth(this.activeDate, i);
       const monthText = this.i18n.formatDate(dateInMonth, 'MMM');
-      this.months.push({label: monthText, value: i});
+      this.months.push({ label: monthText, value: i });
     }
   }
 }
diff --git a/components/calendar/nz-calendar-header.spec.ts b/components/calendar/nz-calendar-header.spec.ts
@@ -9,8 +9,7 @@ import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzRadioGroupComponent as RadioGroup, NzRadioModule } from '../radio/index';
 import { NzSelectComponent as Select } from '../select/nz-select.component';
 import { NzSelectModule } from '../select/nz-select.module';
-import { NzCalendarHeaderComponent as CalendarHeader } from './nz-calendar-header.component';
-import { NzCalendarModule } from './nz-calendar.module';
+import { NzCalendarHeaderComponent, NzCalendarHeaderComponent as CalendarHeader } from './nz-calendar-header.component';
 
 registerLocaleData(zh);
 
@@ -171,6 +170,12 @@ describe('Calendar Header', () => {
 
       expect(component.month).toBe(2);
     });
+    it('should update years when change year', () => {
+      const header = fixture.debugElement.queryAll(By.directive(CalendarHeader))[0];
+      const headerComponent = header.injector.get(NzCalendarHeaderComponent);
+      headerComponent.updateYear(2010);
+      expect(headerComponent.years[0].value).toBe(2000);
+    });
   });
 });