From 71dda9bfce4a1c3a6563f0352580674e2929399d Mon Sep 17 00:00:00 2001 From: Wilson Zeng Date: Fri, 22 Feb 2019 22:04:50 +0800 Subject: [PATCH] feat(module:date-picker): support nzDisabledDate for year-picker (#2949) close #2194 --- components/date-picker/demo/disabled-date.ts | 4 +++- components/date-picker/doc/index.en-US.md | 2 +- components/date-picker/doc/index.zh-CN.md | 2 +- .../date-picker/header-picker.component.html | 1 + .../calendar/calendar-header.component.html | 1 + .../lib/calendar/calendar-header.component.ts | 1 + .../lib/year/year-panel.component.html | 2 +- .../lib/year/year-panel.component.ts | 20 +++++++++++++++++-- .../date-picker/year-picker.component.spec.ts | 18 +++++++++++++++++ 9 files changed, 45 insertions(+), 6 deletions(-) diff --git a/components/date-picker/demo/disabled-date.ts b/components/date-picker/demo/disabled-date.ts index af02a65fe9f..ad60a20c83e 100644 --- a/components/date-picker/demo/disabled-date.ts +++ b/components/date-picker/demo/disabled-date.ts @@ -14,6 +14,8 @@ import setHours from 'date-fns/set_hours';

+ +
`, 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; } ` ] diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md index a8408363d2f..7b34b7be221 100644 --- a/components/date-picker/doc/index.en-US.md +++ b/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｜string｜((d: Date) => TemplateRef｜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` | `{}` | diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md index 94e4c82bbed..91227bc8ff9 100644 --- a/components/date-picker/doc/index.zh-CN.md +++ b/components/date-picker/doc/index.zh-CN.md @@ -41,7 +41,7 @@ registerLocaleData(zh); | `[nzClassName]` | 选择器 className | `string` | `''` | | `[nzDateRender]` | 自定义日期单元格的内容（month-picker/year-picker不支持） | `TemplateRef｜string｜((d: Date) => TemplateRef｜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` | `{}` | diff --git a/components/date-picker/header-picker.component.html b/components/date-picker/header-picker.component.html index fed362f5a35..42fd98e0d3b 100644 --- a/components/date-picker/header-picker.component.html +++ b/components/date-picker/header-picker.component.html @@ -20,6 +20,7 @@
diff --git a/components/date-picker/lib/calendar/calendar-header.component.ts b/components/date-picker/lib/calendar/calendar-header.component.ts index 08b4b85f192..ecd0565c771 100644 --- a/components/date-picker/lib/calendar/calendar-header.component.ts +++ b/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; diff --git a/components/date-picker/lib/year/year-panel.component.html b/components/date-picker/lib/year/year-panel.component.html index 893bf073ecd..5f03dc3d0ab 100644 --- a/components/date-picker/lib/year/year-panel.component.html +++ b/components/date-picker/lib/year/year-panel.component.html @@ -28,7 +28,7 @@ {{ yearCell.content }} diff --git a/components/date-picker/lib/year/year-panel.component.ts b/components/date-picker/lib/year/year-panel.component.ts index 3d860bd67f5..4581b8ab88f 100644 --- a/components/date-picker/lib/year/year-panel.component.ts +++ b/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(); + @Input() disabledDate: (date: Date) => boolean; + @Output() readonly decadePanelShow = new EventEmitter(); 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; diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts index a8d791c8da4..947a39ba89f 100644 --- a/components/date-picker/year-picker.component.spec.ts +++ b/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;