From 2cb80fc1253322e5b02aba38f50b2f37784d0aa7 Mon Sep 17 00:00:00 2001 From: Dave Pringle Date: Sat, 24 Sep 2022 16:10:58 +0200 Subject: [PATCH] feat(module:date-picker): add nzShowWeekNumber property (#7621) --- .../date-picker/date-picker.component.spec.ts | 18 +++++++++++-- .../date-picker/date-picker.component.ts | 3 ++- .../date-picker/date-range-popup.component.ts | 2 +- components/date-picker/demo/week-number.md | 14 ++++++++++ components/date-picker/demo/week-number.ts | 27 +++++++++++++++++++ components/date-picker/doc/index.en-US.md | 2 ++ components/date-picker/doc/index.zh-CN.md | 2 ++ .../date-picker/inner-popup.component.ts | 11 +++++--- components/date-picker/lib/abstract-table.ts | 2 ++ .../date-picker/lib/date-table.component.ts | 6 ++--- components/date-picker/style/patch.less | 9 +++++++ 11 files changed, 85 insertions(+), 11 deletions(-) create mode 100644 components/date-picker/demo/week-number.md create mode 100644 components/date-picker/demo/week-number.ts diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index 5082a9395d..d2396a09fa 100644 --- a/components/date-picker/date-picker.component.spec.ts +++ b/components/date-picker/date-picker.component.spec.ts @@ -573,6 +573,18 @@ describe('NzDatePickerComponent', () => { expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(false); expect(element.classList.contains('ant-picker-dropdown-placement-topRight')).toBe(true); })); + + it('should support nzShowWeekNumber', fakeAsync(() => { + fixtureInstance.nzShowWeekNumber = true; + fixture.detectChanges(); + openPickerByClickTrigger(); + expect(queryFromOverlay('.ant-picker-week-panel-row .ant-picker-cell-week')).toBeDefined(); + fixtureInstance.nzShowWeekNumber = false; + fixture.detectChanges(); + tick(500); + openPickerByClickTrigger(); + expect(queryFromOverlay('.ant-picker-week-panel-row .ant-picker-cell-week')).toBeNull(); + })); }); describe('panel switch and move forward/afterward', () => { @@ -1138,7 +1150,7 @@ describe('NzDatePickerComponent', () => { return queryFromOverlay(`.${PREFIX_CLASS}-header-super-next-btn`); } - describe('ngModel value accesors', () => { + describe('ngModel value accessors', () => { beforeEach(() => (fixtureInstance.useSuite = 3)); it('should specified date provide by "modelValue" be chosen', fakeAsync(() => { @@ -1356,6 +1368,7 @@ describe('in form', () => { [nzInline]="nzInline" [nzBackdrop]="nzBackdrop" [nzPlacement]="nzPlacement" + [nzShowWeekNumber]="nzShowWeekNumber" >
{{ current.getDate() }}
@@ -1363,7 +1376,7 @@ describe('in form', () => { TEST_EXTRA_FOOTER - + @@ -1416,6 +1429,7 @@ class NzTestDatePickerComponent { nzInline = false; nzBackdrop = false; nzPlacement = 'bottomLeft'; + nzShowWeekNumber = false; // nzRanges; nzOnPanelChange(_: string): void {} diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts index 3fccd7878a..8e985e4bcb 100644 --- a/components/date-picker/date-picker.component.ts +++ b/components/date-picker/date-picker.component.ts @@ -185,7 +185,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; [isRange]="isRange" [inline]="nzInline" [defaultPickerValue]="nzDefaultPickerValue" - [showWeek]="nzMode === 'week'" + [showWeek]="nzShowWeekNumber || nzMode === 'week'" [panelMode]="panelMode" (panelModeChange)="onPanelModeChange($event)" (calendarChange)="onCalendarChange($event)" @@ -306,6 +306,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte @Input() @WithConfig() nzBackdrop = false; @Input() nzId: string | null = null; @Input() nzPlacement: NzPlacement = 'bottomLeft'; + @Input() @InputBoolean() nzShowWeekNumber: boolean = false; // TODO(@wenqi73) The PanelMode need named for each pickers and export @Output() readonly nzOnPanelChange = new EventEmitter(); diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts index 5c0b410135..c463c7dc50 100644 --- a/components/date-picker/date-range-popup.component.ts +++ b/components/date-picker/date-range-popup.component.ts @@ -57,7 +57,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
-
+
+ + + +
+
+ +
+ + `, + styles: [ + ` + nz-date-picker, + nz-range-picker { + margin: 0 8px 12px 0; + } + ` + ] +}) +export class NzDemoDatePickerWeekNumberComponent { + showWeekNumber: boolean = false; +} diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md index c07fe893f1..68c6cdaf71 100644 --- a/components/date-picker/doc/index.en-US.md +++ b/components/date-picker/doc/index.en-US.md @@ -78,6 +78,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker. | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) | | `[nzShowToday]` | whether to show 'Today' button | `boolean` | `true` | | `[nzShowNow]` | whether to show 'Now' button on panel when `nzShowTime` is set | `boolean` | `true` | +| `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` | | `(nzOnOk)` | callback when click ok button | `EventEmitter` | - | ### nz-range-picker @@ -95,6 +96,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker. | -------- | ----------- | ---- | ------- | | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) | | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | +| `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` | | `(nzOnOk)` | click ok callback | `EventEmitter` | - | > Currently, supported `nz-time-picker` parameters in `nzShowTime` are: `nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn` diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md index a1e5082a72..bca3a6af4a 100644 --- a/components/date-picker/doc/index.zh-CN.md +++ b/components/date-picker/doc/index.zh-CN.md @@ -79,6 +79,7 @@ registerLocaleData(zh); | `[nzShowTime]` | 增加时间选择功能 | `object \| boolean` | [TimePicker Options](/components/time-picker/zh#api) | | `[nzShowToday]` | 是否展示“今天”按钮 | `boolean` | `true` | | `[nzShowNow]` | 当设定了`nzShowTime`的时候，面板是否显示“此刻”按钮 | `boolean` | `true` | +| `[nzShowWeekNumber]` | 是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数） | `boolean` | `false` | | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter` | - | @@ -96,6 +97,7 @@ registerLocaleData(zh); | --- | --- | --- | --- | | `[nzShowTime]` | 增加时间选择功能 | `object \| boolean` | [TimePicker Options](/components/time-picker/zh#api) | | `[nzDisabledTime]` | 不可选择的时间 | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | +| `[nzShowWeekNumber]` | 是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数） | `boolean` | `false` | | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter` | - | > `nzShowTime` 中当前支持的 `nz-time-picker` 参数有：`nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn` diff --git a/components/date-picker/inner-popup.component.ts b/components/date-picker/inner-popup.component.ts index 10222d4bfc..4741bf31d6 100644 --- a/components/date-picker/inner-popup.component.ts +++ b/components/date-picker/inner-popup.component.ts @@ -106,10 +106,12 @@ import { PREFIX_CLASS } from './util'; @@ -123,6 +125,7 @@ import { PREFIX_CLASS } from './util'; [cellRender]="dateRender" [selectedValue]="selectedValue" [hoverValue]="hoverValue" + [canSelectWeek]="panelMode === 'week'" (valueChange)="onSelectDate($event)" (cellHover)="cellHover.emit($event)" > diff --git a/components/date-picker/lib/abstract-table.ts b/components/date-picker/lib/abstract-table.ts index 18b1e1ff9b..f36b9efa0e 100644 --- a/components/date-picker/lib/abstract-table.ts +++ b/components/date-picker/lib/abstract-table.ts @@ -30,6 +30,7 @@ export abstract class AbstractTable implements OnInit, OnChanges { @Input() disabledDate?: (d: Date) => boolean; @Input() cellRender?: string | TemplateRef | FunctionProp | string>; @Input() fullCellRender?: string | TemplateRef | FunctionProp | string>; + @Input() canSelectWeek: boolean = false; @Output() readonly valueChange = new EventEmitter(); @Output() readonly cellHover = new EventEmitter(); // Emitted when hover on a day by mouse enter @@ -90,6 +91,7 @@ export abstract class AbstractTable implements OnInit, OnChanges { changes.disabledDate || changes.locale || changes.showWeek || + changes.selectWeek || this.isDateRealChange(changes.activeDate) || this.isDateRealChange(changes.value) || this.isDateRealChange(changes.selectedValue) || diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts index 1461753377..2db757a43e 100644 --- a/components/date-picker/lib/date-table.component.ts +++ b/components/date-picker/lib/date-table.component.ts @@ -103,8 +103,8 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn row.dateCells.push(cell); } row.classMap = { - [`ant-picker-week-panel-row`]: this.showWeek, - [`ant-picker-week-panel-row-selected`]: this.showWeek && row.isActive + [`ant-picker-week-panel-row`]: this.canSelectWeek, + [`ant-picker-week-panel-row-selected`]: this.canSelectWeek && row.isActive }; weekRows.push(row); } @@ -112,7 +112,7 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn } addCellProperty(cell: DateCell, date: CandyDate): void { - if (this.hasRangeValue() && !this.showWeek) { + if (this.hasRangeValue() && !this.canSelectWeek) { const [startHover, endHover] = this.hoverValue; const [startSelected, endSelected] = this.selectedValue; // Selected diff --git a/components/date-picker/style/patch.less b/components/date-picker/style/patch.less index c0718eef7a..4de5d8e3ac 100644 --- a/components/date-picker/style/patch.less +++ b/components/date-picker/style/patch.less @@ -17,3 +17,12 @@ top: unset; left: unset; } + +// ensure table is correct width to display week numbers in date mode +.@{picker-prefix-cls}-panel-container.@{picker-prefix-cls}-week-number .@{picker-prefix-cls}-date-panel .@{picker-prefix-cls}-content { + width: 100%; + + th { + width: inherit; + } +}