From 37715122bc103d9a74395fc746d39f26ffa82bd8 Mon Sep 17 00:00:00 2001
From: daniel_fornarini <44554840+danielfornarini@users.noreply.github.com>
Date: Mon, 5 Dec 2022 02:58:26 +0100
Subject: [PATCH] feat(module:date-picker): add ElementRef type to nzSeparator
(#7721)
add the possibility to assign an ElementRef to nzSeparator in nz-range-picker
Co-authored-by: Daniel_Fornarini <44554840+Daniel-Fornarini@users.noreply.github.com>
---
components/date-picker/date-picker.component.ts | 12 +++++++-----
components/date-picker/doc/index.en-US.md | 2 +-
components/date-picker/doc/index.zh-CN.md | 2 +-
.../date-picker/range-picker.component.spec.ts | 15 +++++++++++++--
4 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index c32f895c2a..dbecfc13a5 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -123,11 +123,13 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
- {{ nzSeparator }}
+
+ {{ nzSeparator }}
+
+
+
+
-
-
-
@@ -301,7 +303,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
@Input() @InputBoolean() nzShowNow: boolean = true;
@Input() nzRanges?: PresetRanges;
@Input() nzDefaultPickerValue: CompatibleDate | null = null;
- @Input() @WithConfig() nzSeparator?: string = undefined;
+ @Input() @WithConfig() nzSeparator?: string | TemplateRef = undefined;
@Input() @WithConfig() nzSuffixIcon: string | TemplateRef = 'calendar';
@Input() @WithConfig() nzBackdrop = false;
@Input() nzId: string | null = null;
diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md
index 68c6cdaf71..68d05abbea 100644
--- a/components/date-picker/doc/index.en-US.md
+++ b/components/date-picker/doc/index.en-US.md
@@ -87,7 +87,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
| -------- | ----------- | ---- | ------- |
| `[(ngModel)]` | Date | `Date[]` | - |
| `[nzRanges]` | preseted ranges for quick selection | `{ [ key: string ]: Date[] } \| { [ key: string ]: () => Date[] }` | - |
-| `[nzSeparator]` | separator | `string` | `'~'` |
+| `[nzSeparator]` | separator | `string \| TemplateRef` | `'~'` |
| `(nzOnCalendarChange)` | The start time or the end time of the range change callback | `EventEmitter` | - |
### nz-range-picker[nzMode="date"]
diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md
index bca3a6af4a..8adf5e5c28 100644
--- a/components/date-picker/doc/index.zh-CN.md
+++ b/components/date-picker/doc/index.zh-CN.md
@@ -89,7 +89,7 @@ registerLocaleData(zh);
| --- | --- | --- | --- |
| `[(ngModel)]` | 日期 | `Date[]` | - |
| `[nzRanges]` | 预设时间范围快捷选择 | `{ [ key: string ]: Date[] } \| { [ key: string ]: () => Date[] }` | - |
-| `[nzSeparator]` | 分隔符 | `string` | `'~'` |
+| `[nzSeparator]` | 分隔符 | `string \| TemplateRef` | `'~'` |
| `(nzOnCalendarChange)` | 待选日期发生变化的回调 | `EventEmitter` | - |
### nz-range-picker[nzMode="date"]
diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
index b41c9bb7b9..e096cc537d 100644
--- a/components/date-picker/range-picker.component.spec.ts
+++ b/components/date-picker/range-picker.component.spec.ts
@@ -312,7 +312,7 @@ describe('NzRangePickerComponent', () => {
expect(queryFromRightPanel('.ant-picker-header-month-btn').textContent!.indexOf('2') > -1).toBeTruthy();
}));
- it('should support nzSeparator', fakeAsync(() => {
+ it('should support string nzSeparator', fakeAsync(() => {
fixtureInstance.nzSeparator = '→';
fixture.detectChanges();
expect(fixture.debugElement.query(By.css(`.ant-picker-range-separator`)).nativeElement.textContent.trim()).toBe(
@@ -320,6 +320,14 @@ describe('NzRangePickerComponent', () => {
);
}));
+ it('should support ElementRef nzSeparator', fakeAsync(() => {
+ fixtureInstance.useSuite = 6;
+ fixture.detectChanges();
+ expect(fixture.debugElement.query(By.css(`.ant-picker-range-separator`)).nativeElement.textContent.trim()).toBe(
+ 'TEST_SEPARATOR_REF'
+ );
+ }));
+
it('should support nzOnCalendarChange', fakeAsync(() => {
const nzOnCalendarChange = spyOn(fixtureInstance, 'nzOnCalendarChange');
fixture.detectChanges();
@@ -1216,11 +1224,14 @@ describe('NzRangePickerComponent', () => {
+
+
+ TEST_SEPARATOR_REF
`
})
class NzTestRangePickerComponent {
- useSuite!: 1 | 2 | 3 | 4 | 5;
+ useSuite!: 1 | 2 | 3 | 4 | 5 | 6;
@ViewChild('tplDateRender', { static: true }) tplDateRender!: TemplateRef;
@ViewChild('tplExtraFooter', { static: true }) tplExtraFooter!: TemplateRef;