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>
NG-ZORRO · Dec 5, 2022 · 3771512 · 3771512
1 parent 1820da5
commit 3771512
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git 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';
         </div>
         <div #separatorElement class="{{ prefixCls }}-range-separator">
           <span class="{{ prefixCls }}-separator">
-            <ng-container *ngIf="nzSeparator; else defaultSeparator">{{ nzSeparator }}</ng-container>
+            <ng-container *nzStringTemplateOutlet="nzSeparator; let separator">
+              <ng-container *ngIf="nzSeparator; else defaultSeparator">{{ nzSeparator }}</ng-container>
+              <ng-template #defaultSeparator>
+                <span nz-icon nzType="swap-right" nzTheme="outline"></span>
+              </ng-template>
+            </ng-container>
           </span>
-          <ng-template #defaultSeparator>
-            <span nz-icon nzType="swap-right" nzTheme="outline"></span>
-          </ng-template>
         </div>
         <div class="{{ prefixCls }}-input">
           <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }"></ng-container>
@@ -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<NzSafeAny> = undefined;
   @Input() @WithConfig() nzSuffixIcon: string | TemplateRef<NzSafeAny> = '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
@@ -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<Date[]>` | - |
 
 ### 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
@@ -89,7 +89,7 @@ registerLocaleData(zh);
 | --- | --- | --- | --- |
 | `[(ngModel)]` | 日期 | `Date[]` | - |
 | `[nzRanges]` | 预设时间范围快捷选择 | `{ [ key: string ]: Date[] }  \|  { [ key: string ]: () => Date[] }` | - |
-| `[nzSeparator]` | 分隔符 | `string` | `'~'` |
+| `[nzSeparator]` | 分隔符 | `string \| TemplateRef`                        | `'~'` |
 | `(nzOnCalendarChange)` | 待选日期发生变化的回调 | `EventEmitter<Date[]>` | - |
 
 ### 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
@@ -312,14 +312,22 @@ 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(
         '→'
       );
     }));
 
+    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', () => {
       </ng-container>
 
       <nz-range-picker *ngSwitchCase="5" nzOpen></nz-range-picker>
+
+      <nz-range-picker *ngSwitchCase="6" [nzSeparator]="separatorTemplate"></nz-range-picker>
+      <ng-template #separatorTemplate>TEST_SEPARATOR_REF</ng-template>
     </ng-container>
   `
 })
 class NzTestRangePickerComponent {
-  useSuite!: 1 | 2 | 3 | 4 | 5;
+  useSuite!: 1 | 2 | 3 | 4 | 5 | 6;
   @ViewChild('tplDateRender', { static: true }) tplDateRender!: TemplateRef<Date>;
   @ViewChild('tplExtraFooter', { static: true }) tplExtraFooter!: TemplateRef<void>;