fix(date-picker): separator prop not working, closes #1456

CHANGELOG.en-US.md

@@ -8,6 +8,7 @@
 
 - Fix `n-log` `font-size` prop not working, closes [#1416](https://github.com/TuSimple/naive-ui/issues/1416).
 - Fix `n-loading-bar` will show once even if `start` is not called when `loading-bar-style` is set.
+- Fix `n-date-picker` `separator` prop not working, closes [#1456](https://github.com/TuSimple/naive-ui/issues/1456)
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@
 
 - 修复 `n-log` `font-size` 属性不生效，关闭 [#1416](https://github.com/TuSimple/naive-ui/issues/1416)
 - 修复 `n-loading-bar` 设定 `loading-bar-style` 后不调用 `start` 也会显示一次
+- 修复 `n-date-picker` `separator` 不生效，关闭 [#1456](https://github.com/TuSimple/naive-ui/issues/1456)
 
 ### Feats
 

src/date-picker/src/DatePicker.tsx

@@ -799,14 +799,17 @@ export default defineComponent({
                         {...commonInputProps}
                       >
                         {{
-                          separator: () => (
-                            <NBaseIcon
-                              clsPrefix={mergedClsPrefix}
-                              class={`${mergedClsPrefix}-date-picker-icon`}
-                            >
-                              {{ default: () => <ToIcon /> }}
-                            </NBaseIcon>
-                          ),
+                          separator: () =>
+                            this.separator === undefined ? (
+                              <NBaseIcon
+                                clsPrefix={mergedClsPrefix}
+                                class={`${mergedClsPrefix}-date-picker-icon`}
+                              >
+                                {{ default: () => <ToIcon /> }}
+                              </NBaseIcon>
+                            ) : (
+                              this.separator
+                            ),
                           [clearable ? 'clear' : 'suffix']: () => (
                             <NBaseIcon
                               clsPrefix={mergedClsPrefix}

src/date-picker/tests/DatePicker.spec.tsx

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import { NDatePicker } from '../index'
 import { Value } from '../src/interface'
 import { format } from 'date-fns'
-import { useLocale } from '../../_mixins'
+import { dateEnUS } from '../../locales'
 
 describe('n-date-picker', () => {
   it('should work with import on demand', () => {
@@ -198,7 +198,6 @@ describe('n-date-picker', () => {
   })
 
   it('should work with `defaultValue` prop', async () => {
-    const { dateLocaleRef } = useLocale('Time')
     const wrapper = mount(NDatePicker, {
       props: {
         defaultValue: 1183135260000
@@ -208,7 +207,7 @@ describe('n-date-picker', () => {
     const inputEl = await wrapper.find('.n-input__input').find('input')
     expect(inputEl.element.value).toEqual(
       format(1183135260000, 'yyyy-MM-dd', {
-        locale: dateLocaleRef.value.locale
+        locale: dateEnUS.locale
       })
     )
   })
@@ -283,4 +282,13 @@ describe('n-date-picker', () => {
 
     wrapper.unmount()
   })
+
+  it('should work with `separator` prop', async () => {
+    const wrapper = mount(NDatePicker, {
+      props: { separator: '07akioni', type: 'daterange' }
+    })
+    expect(wrapper.text().includes('07akioni')).toBe(true)
+    await wrapper.setProps({ separator: '08akioni', type: 'datetimerange' })
+    expect(wrapper.text().includes('08akioni')).toBe(true)
+  })
 })