feat(date-picker): add date-icon and to-icon slots

CHANGELOG.en-US.md

@@ -26,6 +26,7 @@
 - `n-pagination` will jump to the first / last page when its value is out of range, closes [#2928](https://github.com/TuSimple/naive-ui/issues/2928).
 - `n-color-picker` adds `on-confirm` prop.
 - `n-input` adds `clear-icon` slot.
+- `n-date-picker` adds `date-icon` and `to-icon` slots, closes [#2668](https://github.com/TuSimple/naive-ui/issues/2668).
 
 ### i18n
 

CHANGELOG.zh-CN.md

@@ -26,6 +26,7 @@
 - `n-pagination` 中快速跳转的输入字符只允许纯数字，关闭 [#2928](https://github.com/TuSimple/naive-ui/issues/2928)
 - `n-color-picker` 新增 `on-confirm` 属性
 - `n-input` 新增 `clear-icon` slot
+- `n-date-picker` 新增 `date-icon` 和 `to-icon` 插槽，关闭 [#2668](https://github.com/TuSimple/naive-ui/issues/2668)
 
 ### i18n
 

src/date-picker/demos/enUS/icon.demo.vue

@@ -0,0 +1,35 @@
+<markdown>
+# Icon
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-date-picker type="date">
+      <template #date-icon>
+        <n-icon :size="16" :component="AccessibilityOutline" />
+      </template>
+    </n-date-picker>
+    <n-date-picker type="daterange">
+      <template #date-icon>
+        <n-icon :size="16" :component="AccessibilityOutline" />
+      </template>
+      <template #to-icon>
+        <n-icon :size="16" :component="AirplaneOutline" />
+      </template>
+    </n-date-picker>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { AccessibilityOutline, AirplaneOutline } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    return {
+      AccessibilityOutline,
+      AirplaneOutline
+    }
+  }
+})
+</script>

src/date-picker/demos/enUS/index.demo-entry.md

@@ -26,6 +26,7 @@ footerslot.vue
 update-on-close.vue
 focus.vue
 status.vue
+icon.vue
 ```
 
 ## API
@@ -158,9 +159,11 @@ status.vue
 
 ### DatePicker Slots
 
-| Name   | Parameters | Description   |
-| ------ | ---------- | ------------- |
-| footer | `()`       | Extra Footer. |
+| Name      | Parameters | Description            | Version      |
+| --------- | ---------- | ---------------------- | ------------ |
+| date-icon | `()`       | icon of the input.     | NEXT_VERSION |
+| footer    | `()`       | Extra Footer.          |              |
+| to-icon   | `()`       | icon of the daterange. | NEXT_VERSION |
 
 ### DatePicker Methods
 

src/date-picker/demos/zhCN/icon.demo.vue

@@ -0,0 +1,35 @@
+<markdown>
+# 图标
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-date-picker type="date">
+      <template #date-icon>
+        <n-icon :size="16" :component="AccessibilityOutline" />
+      </template>
+    </n-date-picker>
+    <n-date-picker type="daterange">
+      <template #date-icon>
+        <n-icon :size="16" :component="AccessibilityOutline" />
+      </template>
+      <template #to-icon>
+        <n-icon :size="16" :component="AirplaneOutline" />
+      </template>
+    </n-date-picker>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { AccessibilityOutline, AirplaneOutline } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    return {
+      AccessibilityOutline,
+      AirplaneOutline
+    }
+  }
+})
+</script>

src/date-picker/demos/zhCN/index.demo-entry.md

@@ -24,6 +24,7 @@ events.vue
 format.vue
 footerslot.vue
 status.vue
+icon.vue
 ```
 
 ## API
@@ -156,9 +157,11 @@ status.vue
 
 ### DatePicker Slots
 
-| 名称   | 参数 | 说明           |
-| ------ | ---- | -------------- |
-| footer | `()` | 添加额外的页脚 |
+| 名称      | 参数 | 说明             | 版本         |
+| --------- | ---- | ---------------- | ------------ |
+| date-icon | `()` | 日期输入框的图标 | NEXT_VERSION |
+| footer    | `()` | 添加额外的页脚   |              |
+| to-icon   | `()` | 日期范围的图标   | NEXT_VERSION |
 
 ### DatePicker Methods
 

src/date-picker/src/DatePicker.tsx

@@ -35,7 +35,14 @@ import {
   useThemeClass
 } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { warn, call, useAdjustedTo, createKey, warnOnce } from '../../_utils'
+import {
+  warn,
+  call,
+  useAdjustedTo,
+  createKey,
+  warnOnce,
+  resolveSlot
+} from '../../_utils'
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { datePickerLight } from '../styles'
 import { strictParse } from './utils'
@@ -919,7 +926,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { clearable, triggerOnRender } = this
+    const { clearable, triggerOnRender, mergedClsPrefix, $slots } = this
     triggerOnRender?.()
     const commonInputProps: InputProps = {
       bordered: this.mergedBordered,
@@ -952,7 +959,6 @@ export default defineComponent({
       themeClass: this.themeClass,
       onRender: this.onRender
     }
-    const { mergedClsPrefix } = this
     return (
       <div
         ref="triggerElRef"
@@ -999,20 +1005,29 @@ export default defineComponent({
                                 clsPrefix={mergedClsPrefix}
                                 class={`${mergedClsPrefix}-date-picker-icon`}
                               >
-                                {{ default: () => <ToIcon /> }}
+                                {{
+                                  default: () =>
+                                    resolveSlot($slots['to-icon'], () => [
+                                      <ToIcon />
+                                    ])
+                                }}
                               </NBaseIcon>
                             ) : (
                               this.separator
                             ),
-                          [clearable ? 'clear-icon-placeholder' : 'suffix']:
-                            () => (
-                              <NBaseIcon
-                                clsPrefix={mergedClsPrefix}
-                                class={`${mergedClsPrefix}-date-picker-icon`}
-                              >
-                                {{ default: () => <DateIcon /> }}
-                              </NBaseIcon>
-                            )
+                          [clearable ? 'clear-icon-placeholder' : 'suffix']: () => (
+                            <NBaseIcon
+                              clsPrefix={mergedClsPrefix}
+                              class={`${mergedClsPrefix}-date-picker-icon`}
+                            >
+                              {{
+                                default: () =>
+                                  resolveSlot($slots['date-icon'], () => [
+                                    <DateIcon />
+                                  ])
+                              }}
+                            </NBaseIcon>
+                          )
                         }}
                       </NInput>
                     ) : (
@@ -1034,15 +1049,19 @@ export default defineComponent({
                         {...commonInputProps}
                       >
                         {{
-                          [clearable ? 'clear-icon-placeholder' : 'suffix']:
-                            () => (
-                              <NBaseIcon
-                                clsPrefix={mergedClsPrefix}
-                                class={`${mergedClsPrefix}-date-picker-icon`}
-                              >
-                                {{ default: () => <DateIcon /> }}
-                              </NBaseIcon>
-                            )
+                          [clearable ? 'clear-icon-placeholder' : 'suffix']: () => (
+                            <NBaseIcon
+                              clsPrefix={mergedClsPrefix}
+                              class={`${mergedClsPrefix}-date-picker-icon`}
+                            >
+                              {{
+                                default: () =>
+                                  resolveSlot($slots['date-icon'], () => [
+                                    <DateIcon />
+                                  ])
+                              }}
+                            </NBaseIcon>
+                          )
                         }}
                       </NInput>
                     )