feat(date-picker): adds date-format prop

tusen-ai · Oct 7, 2024 · 861e800 · 861e800
1 parent 07f6f48
commit 861e800
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 9 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,12 +2,16 @@
 
 ## NEXT_VERSION
 
-`NEXT_VERSION`
+`xxxx-xx-xx`
 
-### Features
+### Fixes
 
 - Fix `n-time-picker`'s `use-12-hours` type error warning, closes [#4308](https://github.com/tusen-ai/naive-ui/issues/4308)
+
+### Features
+
 - `n-image` adds `error` slot, closes [#5649](https://github.com/tusen-ai/naive-ui/issues/5649)
+- `n-date-picker` adds `date-format` prop.
 
 ## 2.40.1
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,12 +2,16 @@
 
 ## NEXT_VERSION
 
-`NEXT_VERSION`
+`xxxx-xx-xx`
 
-### Features
+### Fixes
 
 - `n-time-picker` 的 `use-12-hours` 类型错误警告，关闭 [#4308](https://github.com/tusen-ai/naive-ui/issues/4308)
+
+### Features
+
 - `n-image` 新增 `error` 插槽，关闭 [#5649](https://github.com/tusen-ai/naive-ui/issues/5649)
+- `n-date-picker` 新增 `date-format` 属性
 
 ## 2.40.1
 

diff --git a/src/date-picker/demos/enUS/index.demo-entry.md b/src/date-picker/demos/enUS/index.demo-entry.md
@@ -40,6 +40,7 @@ panel.vue
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
 | clearable | `boolean` | `false` | Whether the date picker is clearable. |  |
+| date-format | `string` | `undefined` | Date input format inside popup panel. | NEXT_VERSION |
 | default-value | `number \| [number, number] \| null` | `undefined` | Date picker's default value. |  |
 | default-formatted-value | `string \| [string, string] \| null` | `undefined` | Date picker's default formatted value. | 2.24.0 |
 | disabled | `boolean` | `false` | Whether the date picker is disabled. |  |

diff --git a/src/date-picker/demos/zhCN/index.demo-entry.md b/src/date-picker/demos/zhCN/index.demo-entry.md
@@ -40,6 +40,7 @@ form-debug.vue
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
 | clearable | `boolean` | `false` | 是否支持清除 |  |
+| date-format | `string` | `undefined` | 选择面板内部日期输入框的日期格式 | NEXT_VERSION |
 | default-value | `number \| [number, number] \| null` | `undefined` | 默认被选中的日期的时间戳 |  |
 | default-formatted-value | `string \| [string, string] \| null` | `undefined` | Date Picker 格式化后的值 |  |
 | disabled | `boolean` | `false` | 是否禁用 |  |

diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx
@@ -64,6 +64,7 @@ import MonthRangePanel from './panel/monthrange'
 import style from './styles/index.cssr'
 import type { DatePickerInst } from './public-types'
 import { datePickerProps } from './props'
+import type { UsePanelCommonProps } from './panel/use-panel-common'
 
 export type DatePickerSetupProps = ExtractPropTypes<typeof datePickerProps>
 
@@ -936,7 +937,10 @@ export default defineComponent({
   },
   render() {
     const { clearable, triggerOnRender, mergedClsPrefix, $slots } = this
-    const commonPanelProps = {
+    const commonPanelProps: UsePanelCommonProps & {
+      ref: string
+      style: CSSProperties
+    } = {
       onUpdateValue: this.handlePanelUpdateValue,
       onTabOut: this.handlePanelTabOut,
       onClose: this.handlePanelClose,
@@ -958,7 +962,8 @@ export default defineComponent({
       onPrevMonth: this.onPrevMonth,
       onNextYear: this.onNextYear,
       onPrevYear: this.onPrevYear,
-      timerPickerFormat: this.timerPickerFormat
+      timerPickerFormat: this.timerPickerFormat,
+      dateFormat: this.dateFormat
     }
     const renderPanel = (): VNode => {
       const { type } = this

diff --git a/src/date-picker/src/panel/use-dual-calendar.ts b/src/date-picker/src/panel/use-dual-calendar.ts
@@ -1,4 +1,5 @@
-import { type ExtractPropTypes, computed, inject, ref, watch } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import {
   addMonths,
   format,
@@ -43,7 +44,7 @@ const useDualCalendarProps = {
   defaultCalendarEndTime: Number,
   bindCalendarMonths: Boolean,
   actions: {
-    type: Array,
+    type: Array as PropType<string[]>,
     default: () => ['clear', 'confirm']
   }
 } as const

diff --git a/src/date-picker/src/panel/use-panel-common.ts b/src/date-picker/src/panel/use-panel-common.ts
@@ -37,6 +37,8 @@ const usePanelCommonProps = {
   onConfirm: Function as PropType<(value: Value | null) => void>,
   onClose: Function as PropType<OnClose>,
   onTabOut: Function,
+  onKeydown: Function,
+  actions: Array as PropType<string[]>,
   onUpdateValue: {
     type: Function as PropType<OnPanelUpdateValue>,
     required: true
@@ -50,7 +52,7 @@ const usePanelCommonProps = {
   onPrevYear: Function as PropType<() => void>
 } as const
 
-type UsePanelCommonProps = ExtractPropTypes<typeof usePanelCommonProps>
+export type UsePanelCommonProps = ExtractPropTypes<typeof usePanelCommonProps>
 
 function usePanelCommon(props: UsePanelCommonProps) {
   const {