feat(module:date-picker): support nzDisabledDate for year-picker (#2949)

close #2194

components/date-picker/demo/disabled-date.ts

@@ -14,6 +14,8 @@ import setHours from 'date-fns/set_hours';
     <br>
     <nz-month-picker [nzDisabledDate]="disabledDate" nzPlaceHolder="Select month"></nz-month-picker>
     <br>
+    <nz-year-picker [nzDisabledDate]="disabledDate"></nz-year-picker>
+    <br>
     <nz-range-picker
       [nzDisabledDate]="disabledDate"
       [nzDisabledTime]="disabledRangeTime"
@@ -22,7 +24,7 @@ import setHours from 'date-fns/set_hours';
     ></nz-range-picker>
   `,
   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

@@ -41,7 +41,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzClassName]` | picker className | `string` | `''` |
 | `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | `TemplateRef<Date>｜string｜((d: Date) => TemplateRef<Date>｜string)` | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` |
-| `[nzDisabledDate]` | specify the date that cannot be selected (Not support by year-picker) | `(current: Date) => boolean` | - |
+| `[nzDisabledDate]` | specify the date that cannot be selected | `(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` | `{}` |

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

@@ -41,7 +41,7 @@ registerLocaleData(zh);
 | `[nzClassName]` | 选择器 className | `string` | `''` |
 | `[nzDateRender]` | 自定义日期单元格的内容（month-picker/year-picker不支持） | `TemplateRef<Date>｜string｜((d: Date) => TemplateRef<Date>｜string)` | - |
 | `[nzDisabled]` | 禁用 | `boolean` | `false` |
-| `[nzDisabledDate]` | 不可选择的日期（year-picker不支持） | `(current: Date) => boolean` | - |
+| `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - |
 | `[nzLocale]` | 国际化配置 | `object` | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | `[nzOpen]` | 控制弹层是否展开 | `boolean` | - |
 | `[nzPopupStyle]` | 额外的弹出日历样式 | `object` | `{}` |

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

@@ -20,6 +20,7 @@
           <div class="ant-calendar-month-header-wrap">
             <calendar-header
               [disabledMonth]="nzDisabledDate"
+              [disabledYear]="nzDisabledDate"
               [panelMode]="panelMode"
               (panelModeChange)="onPanelModeChange($event)"
               [value]="nzValue"

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

@@ -51,6 +51,7 @@
       <year-panel
         [locale]="locale"
         [value]="value"
+        [disabledDate]="disabledYear"
         (valueChange)="onChooseYear($event)"
         (decadePanelShow)="changePanel('decade')"
       ></year-panel>

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

@@ -18,6 +18,7 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
   @Input() enablePrev: boolean = true;
   @Input() enableNext: boolean = true;
   @Input() disabledMonth: (date: Date) => boolean;
+  @Input() disabledYear: (date: Date) => boolean;
   @Input() showTimePicker: boolean = false;
 
   @Input() value: CandyDate;

components/date-picker/lib/year/year-panel.component.html

@@ -28,7 +28,7 @@
             <td *ngFor="let yearCell of row; trackBy: trackPanelYear"
               role="gridcell"
               title="{{ yearCell.title }}"
-              (click)="yearCell.onClick()"
+              (click)="yearCell.disabled ? null : yearCell.onClick()"
               [ngClass]="yearCell.classMap"
             >
               <a class="{{ prefixCls }}-year">{{ yearCell.content }}</a>

components/date-picker/lib/year/year-panel.component.ts

@@ -11,7 +11,17 @@ const MAX_COL = 3;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'year-panel',
-  templateUrl: 'year-panel.component.html'
+  templateUrl: 'year-panel.component.html',
+  styles: [
+    // Support disabledDate
+    `
+      .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year, .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year:hover {
+        color: rgba(0,0,0,0.25);
+        background: #f5f5f5;
+        cursor: not-allowed;
+      }
+    `
+  ]
 })
 
 export class YearPanelComponent implements OnChanges {
@@ -20,6 +30,8 @@ export class YearPanelComponent implements OnChanges {
   @Input() value: CandyDate;
   @Output() readonly valueChange = new EventEmitter<CandyDate>();
 
+  @Input() disabledDate: (date: Date) => boolean;
+
   @Output() readonly decadePanelShow = new EventEmitter<void>();
 
   get currentYear(): number {
@@ -38,7 +50,7 @@ export class YearPanelComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value) {
+    if (changes.value || changes.disabledDate) {
       this.render();
     }
   }
@@ -86,8 +98,10 @@ export class YearPanelComponent implements OnChanges {
       for (let colIndex = 0; colIndex < MAX_COL; colIndex ++) {
         const year = previousYear + index;
         const content = String(year);
+        const disabled = this.disabledDate ? this.disabledDate(this.value.setYear(year).nativeDate) : false;
 
         const cell = years[rowIndex][colIndex] = {
+          disabled,
           content,
           year,
           title: content,
@@ -101,6 +115,7 @@ export class YearPanelComponent implements OnChanges {
         cell.classMap = {
           [`${this.prefixCls}-cell`]: true,
           [`${this.prefixCls}-selected-cell`]: cell.isCurrent,
+          [`${this.prefixCls}-cell-disabled`]: disabled,
           [`${this.prefixCls}-last-decade-cell`]: cell.isLowerThanStart,
           [`${this.prefixCls}-next-decade-cell`]: cell.isBiggerThanEnd
         };
@@ -121,6 +136,7 @@ export class YearPanelComponent implements OnChanges {
 }
 
 export interface PanelYearData {
+  disabled: boolean;
   content: string;
   year: number;
   title: string;

components/date-picker/year-picker.component.spec.ts

@@ -157,6 +157,22 @@ describe('NzYearPickerComponent', () => {
       expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
     });
 
+    it('should support nzDisabledDate', fakeAsync(() => {
+      fixture.detectChanges();
+      fixtureInstance.nzValue = new Date('2018-11-11 12:12:12');
+      fixtureInstance.nzDisabledDate = (current: Date) => current.getFullYear() === 2013;
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      const disabledCell = overlayContainerElement.querySelector('tbody.ant-calendar-year-panel-tbody tr td.ant-calendar-year-panel-cell-disabled');
+      expect(disabledCell.textContent).toContain('2013');
+    }));
+
     it('should support nzLocale', () => {
       const featureKey = 'TEST_PLACEHOLDER';
       fixtureInstance.nzLocale = { lang: { placeholder: featureKey } };
@@ -372,6 +388,7 @@ describe('NzYearPickerComponent', () => {
         [nzAllowClear]="nzAllowClear"
         [nzAutoFocus]="nzAutoFocus"
         [nzDisabled]="nzDisabled"
+        [nzDisabledDate]="nzDisabledDate"
         [nzClassName]="nzClassName"
         [nzLocale]="nzLocale"
         [nzPlaceHolder]="nzPlaceHolder"
@@ -415,6 +432,7 @@ class NzTestYearPickerComponent {
   nzAllowClear;
   nzAutoFocus;
   nzDisabled;
+  nzDisabledDate;
   nzClassName;
   nzLocale;
   nzPlaceHolder;