feat(module:date-picker): refactoring and add new feature of year-picker

components/date-picker/date-picker.module.ts

@@ -6,10 +6,12 @@ import { LibPackerModule } from './lib/lib-packer.module';
 
 import { NzDatePickerComponent } from './date-picker.component';
 import { DateRangePickerComponent } from './date-range-picker.component';
+import { HeaderPickerComponent } from './header-picker.component';
 import { NzMonthPickerComponent } from './month-picker.component';
 import { NzPickerComponent } from './picker.component';
 import { NzRangePickerComponent } from './range-picker.component';
 import { NzWeekPickerComponent } from './week-picker.component';
+import { NzYearPickerComponent } from './year-picker.component';
 
 @NgModule({
   imports: [
@@ -22,15 +24,19 @@ import { NzWeekPickerComponent } from './week-picker.component';
     NzDatePickerComponent,
     NzRangePickerComponent,
     NzMonthPickerComponent,
+    NzYearPickerComponent,
     NzWeekPickerComponent
   ],
   declarations: [
+    HeaderPickerComponent,
     DateRangePickerComponent,
+    NzPickerComponent,
+
     NzDatePickerComponent,
     NzMonthPickerComponent,
+    NzYearPickerComponent,
     NzWeekPickerComponent,
-    NzRangePickerComponent,
-    NzPickerComponent
+    NzRangePickerComponent
   ],
   providers: []
 })

components/date-picker/demo/basic.ts

@@ -9,14 +9,16 @@ import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd';
     <br>
     <nz-month-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select month"></nz-month-picker>
     <br>
+    <nz-year-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select year"></nz-year-picker>
+    <br>
     <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
     <br>
     <nz-week-picker [(ngModel)]="date" (ngModelChange)="getWeek($event)" nzPlaceHolder="Select week"></nz-week-picker>
     <br>
     <button nz-button nzType="default" (click)="changeLanguage()">Switch language for all pickers</button>
   `,
   styles  : [ `
-    nz-date-picker, nz-month-picker, nz-range-picker, nz-week-picker {
+    nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker {
       margin: 0 8px 12px 0;
     }
   ` ]

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

@@ -39,9 +39,9 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzAllowClear]` | Whether to show clear button | boolean | true |
 | `[nzAutoFocus]` | get focus when component mounted | boolean | false |
 | `[nzClassName]` | picker className | string | '' |
-| `[nzDateRender]` | custom rendering function for date cells (Not support by nz-month-picker) | TemplateRef<Date> / string or (d: Date) => TemplateRef<Date> / string | - |
+| `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | TemplateRef<Date> / string or (d: Date) => TemplateRef<Date> / string | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | boolean | false |
-| `[nzDisabledDate]` | specify the date that cannot be selected | (current: Date) => boolean | - |
+| `[nzDisabledDate]` | specify the date that cannot be selected (Not support by year-picker) | (current: Date) => boolean | - |
 | `[nzLocale]` | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | `[nzOpen]` | open state of picker | boolean | - |
 | `[nzPopupStyle]` | to customize the style of the popup calendar | object | {} |
@@ -64,6 +64,16 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `(nzOnOk)` | callback when click ok button | `EventEmitter<Date>` | - |
 | `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
 
+### nz-year-picker
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[ngModel]` | Date | Date | - |
+| `[nzFormat]` | to set the date format, refer to [DatePipe](https://angular.io/api/common/DatePipe) | string | "yyyy" |
+| `[nzRenderExtraFooter]` | render extra footer in panel | TemplateRef / string or () => TemplateRef / string | - |
+| `[nzPlaceHolder]` | placeholder of date input | string | - |
+| `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |
+
 ### nz-month-picker
 
 | Property | Description | Type | Default |

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

@@ -40,9 +40,9 @@ registerLocaleData(zh);
 | `[nzAllowClear]` | 是否显示清除按钮 | boolean | true |
 | `[nzAutoFocus]` | 自动获取焦点 | boolean | false |
 | `[nzClassName]` | 选择器 className | string | '' |
-| `[nzDateRender]` | 自定义日期单元格的内容（nz-month-picker不支持） | TemplateRef<Date> / string or (d: Date) => TemplateRef<Date> / string | - |
+| `[nzDateRender]` | 自定义日期单元格的内容（month-picker/year-picker不支持） | TemplateRef<Date> / string or (d: Date) => TemplateRef<Date> / string | - |
 | `[nzDisabled]` | 禁用 | boolean | false |
-| `[nzDisabledDate]` | 不可选择的日期 | (current: Date) => boolean | 无 |
+| `[nzDisabledDate]` | 不可选择的日期（year-picker不支持） | (current: Date) => boolean | 无 |
 | `[nzLocale]` | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | `[nzOpen]` | 控制弹层是否展开 | boolean | - |
 | `[nzPopupStyle]` | 额外的弹出日历样式 | object | {} |
@@ -65,6 +65,16 @@ registerLocaleData(zh);
 | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter<Date>` | - |
 | `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` | 无 |
 
+### nz-year-picker
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `[ngModel]` | 日期 | Date | 无 |
+| `[nzFormat]` | 展示的日期格式，配置参考 [DatePipe](https://angular.io/api/common/DatePipe) | string | "yyyy" |
+| `[nzRenderExtraFooter]` | 在面板中添加额外的页脚 | TemplateRef / string or () => TemplateRef / string | - |
+| `[nzPlaceHolder]` | 输入框提示文字 | string | - |
+| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` | 无 |
+
 ### nz-month-picker
 
 | 参数 | 说明 | 类型 | 默认值 |

components/date-picker/month-picker.component.html → components/date-picker/header-picker.component.html

@@ -19,12 +19,12 @@
         <div class="ant-calendar-month-calendar-content">
           <div class="ant-calendar-month-header-wrap">
             <calendar-header
-              [forceToMonth]="true"
               [disabledMonth]="nzDisabledDate"
               [panelMode]="panelMode"
               (panelModeChange)="onPanelModeChange($event)"
               [value]="nzValue"
-              (valueChange)="onValueChange($event)"
+              (chooseYear)="onChooseValue('year', $event)"
+              (chooseMonth)="onChooseValue('month', $event)"
               [locale]="nzLocale.lang"
               [enablePrev]="true"
               [enableNext]="true"

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

@@ -0,0 +1,80 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+
+import { FunctionProp } from '../core/types/common-wrap';
+import { valueFunctionProp } from '../core/util/convert';
+import { NzI18nService } from '../i18n/nz-i18n.service';
+import { AbstractPickerComponent } from './abstract-picker.component';
+import { CandyDate } from './lib/candy-date';
+import { PanelMode } from './standard-types';
+
+/**
+ * The base picker for header panels, current support: Year/Month
+ */
+
+@Component({
+  template: ``
+})
+export class HeaderPickerComponent extends AbstractPickerComponent implements OnInit, OnChanges {
+  @Input() nzPlaceHolder: string;
+
+  @Input() nzRenderExtraFooter: FunctionProp<TemplateRef<void> | string>;
+  @Input() nzDefaultValue: CandyDate;
+  @Input() nzFormat: string; // [Canmplemented by sub class] The output format
+
+  endPanelMode: SupportHeaderPanel; // [Implemented by sub class] The final panel for picking a date
+  panelMode: PanelMode; // Current panel mode
+  extraFooter: TemplateRef<void> | string;
+
+  private supportPanels: PanelMode[];
+
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    this.panelMode = this.endPanelMode;
+
+    const allHeaderPanels: PanelMode[] = [ 'decade', 'year', 'month' ];
+    this.supportPanels = allHeaderPanels.slice(0, allHeaderPanels.indexOf(this.endPanelMode) + 1);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+
+    if (changes.nzRenderExtraFooter) {
+      this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
+    }
+  }
+
+  onPanelModeChange(mode: PanelMode): void {
+    if (this.supportPanels.indexOf(mode) > -1) {
+      this.panelMode = mode;
+    } else { // Since the default "click year" logic can be "year panel" -> "date panel", we need force to the end panel otherwise
+      this.panelMode = this.endPanelMode;
+    }
+  }
+
+  onChooseValue(mode: SupportHeaderPanel, value: CandyDate): void {
+    if (this.endPanelMode === mode) {
+      super.onValueChange(value);
+
+      this.closeOverlay();
+    }
+  }
+
+  onOpenChange(open: boolean): void {
+    if (!open) {
+      this.cleanUp();
+    }
+    this.nzOnOpenChange.emit(open);
+  }
+
+  // Restore some initial props to let open as new in next time
+  private cleanUp(): void {
+    this.panelMode = this.endPanelMode;
+  }
+}
+
+export type SupportHeaderPanel = 'year' | 'month';

components/date-picker/lib/calendar/calendar-header.component.ts

@@ -16,14 +16,17 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
   @Input() enableNext: boolean = true;
   @Input() disabledMonth: (date: Date) => boolean;
   @Input() showTimePicker: boolean = false;
-  @Input() forceToMonth: boolean = false; // Force change panel to month without value change when choose a year/decade
 
   @Input() value: CandyDate;
   @Output() valueChange = new EventEmitter<CandyDate>();
 
   @Input() panelMode: PanelMode;
   @Output() panelModeChange = new EventEmitter<PanelMode>();
 
+  @Output() chooseDecade = new EventEmitter<CandyDate>();
+  @Output() chooseYear = new EventEmitter<CandyDate>();
+  @Output() chooseMonth = new EventEmitter<CandyDate>();
+
   prefixCls: string = 'ant-calendar';
   yearMonthDaySelectors: YearMonthDaySelector[];
 
@@ -60,36 +63,27 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
   }
 
   changePanel(mode: PanelMode, value?: CandyDate): void {
-    // this.panelMode = mode;
-    // this.panelModeChange.emit(this.panelMode);
     this.panelModeChange.emit(mode);
     if (value) {
       this.changeValueFromInside(value);
     }
   }
 
   onChooseDecade(value: CandyDate): void {
-    if (this.forceToMonth) {
-      this.value = value; // Change internal value only
-      this.changePanel('year');
-    } else {
-      this.changePanel('year', value);
-    }
+    this.changePanel('year', value);
+    this.chooseDecade.emit(value);
   }
 
   onChooseYear(value: CandyDate): void {
-    if (this.forceToMonth) {
-      this.value = value; // Change internal value only
-      this.changePanel('month');
-    } else {
-      this.changePanel(this.yearToMonth ? 'month' : 'date', value);
-      this.yearToMonth = false; // Clear
-    }
+    this.changePanel(this.yearToMonth ? 'month' : 'date', value);
+    this.yearToMonth = false; // Clear
+    this.chooseYear.emit(value);
   }
 
   onChooseMonth(value: CandyDate): void {
     this.changePanel('date', value);
     this.yearToMonth = false; // Clear
+    this.chooseMonth.emit(value);
   }
 
   changeToMonthPanel(): void {

components/date-picker/lib/lib-packer-supplements.spec.ts

@@ -44,14 +44,14 @@ describe('Coverage supplements', () => {
       expect(componentInstance.render).not.toHaveBeenCalled();
     });
 
-    it('should work with forceToMonth branch', () => {
-      componentInstance.forceToMonth = true;
-      spyOn(componentInstance, 'changePanel');
-      componentInstance.onChooseDecade(new CandyDate());
-      expect(componentInstance.changePanel).toHaveBeenCalledWith('year');
-      componentInstance.onChooseYear(new CandyDate());
-      expect(componentInstance.changePanel).toHaveBeenCalledWith('month');
-    });
+    // it('should work with forceToMonth branch', () => {
+    //   componentInstance.forceToMonth = true;
+    //   spyOn(componentInstance, 'changePanel');
+    //   componentInstance.onChooseDecade(new CandyDate());
+    //   expect(componentInstance.changePanel).toHaveBeenCalledWith('year');
+    //   componentInstance.onChooseYear(new CandyDate());
+    //   expect(componentInstance.changePanel).toHaveBeenCalledWith('month');
+    // });
 
     it('should step into yearToMonth branch', () => {
       const testDate = new CandyDate();

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

@@ -1,16 +1,11 @@
-import { forwardRef, Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { forwardRef, Component, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { FunctionProp } from '../core/types/common-wrap';
-import { valueFunctionProp } from '../core/util/convert';
-import { NzI18nService } from '../i18n/nz-i18n.service';
-import { AbstractPickerComponent } from './abstract-picker.component';
-import { CandyDate } from './lib/candy-date';
-import { PanelMode } from './standard-types';
+import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.component';
 
 @Component({
   selector: 'nz-month-picker',
-  templateUrl: './month-picker.component.html',
+  templateUrl: './header-picker.component.html',
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     multi: true,
@@ -21,49 +16,8 @@ import { PanelMode } from './standard-types';
   }
 })
 
-export class NzMonthPickerComponent extends AbstractPickerComponent implements OnChanges {
-  @Input() nzPlaceHolder: string;
-
-  @Input() nzRenderExtraFooter: FunctionProp<TemplateRef<void> | string>;
-  @Input() nzDefaultValue: CandyDate;
+export class NzMonthPickerComponent extends HeaderPickerComponent {
   @Input() nzFormat: string = 'yyyy-MM';
 
-  panelMode: PanelMode = 'month';
-  extraFooter: TemplateRef<void> | string;
-
-  constructor(i18n: NzI18nService) {
-    super(i18n);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    super.ngOnChanges(changes);
-
-    if (changes.nzRenderExtraFooter) {
-      this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
-    }
-  }
-
-  onPanelModeChange(mode: PanelMode): void {
-    if (mode !== 'date') {
-      this.panelMode = mode;
-    }
-  }
-
-  onValueChange(value: CandyDate): void {
-    super.onValueChange(value);
-
-    this.closeOverlay();
-  }
-
-  onOpenChange(open: boolean): void {
-    if (!open) {
-      this.cleanUp();
-    }
-    this.nzOnOpenChange.emit(open);
-  }
-
-  // Restore some initial props to let open as new in next time
-  private cleanUp(): void {
-    this.panelMode = 'month';
-  }
+  endPanelMode: SupportHeaderPanel = 'month';
 }