From 9c239bda996006a4c4c94dfbc76772d97f1402f5 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 14:03:57 +0800 Subject: [PATCH 1/6] feat: range --- db/TDesign.db | Bin 1097728 -> 1097728 bytes .../date-picker/date-picker.en-US.md | 1 + .../components/date-picker/date-picker.md | 1 + .../packages/components/date-picker/type.ts | 6 +++ .../date-picker/date-picker.en-US.md | 1 + .../components/date-picker/date-picker.md | 1 + .../packages/components/date-picker/props.ts | 4 ++ .../packages/components/date-picker/type.ts | 6 +++ .../src/date-picker/date-picker.en-US.md | 1 + .../src/date-picker/date-picker.md | 1 + .../tdesign-vue/src/date-picker/props.ts | 4 ++ .../tdesign-vue/src/date-picker/type.ts | 6 +++ packages/scripts/api.json | 41 ++++++++++++++++++ 13 files changed, 73 insertions(+) diff --git a/db/TDesign.db b/db/TDesign.db index 2165aeb9670a078790a2e70379f637e8f974ebc9..e5a7df9dfee53104d9ac0a1dc3bd1bfbebd8f012 100644 GIT binary patch delta 575 zcmZo@aBgUDo*>P*c%qCmrVF?Vu(C#na0@Kk4rG4G z5@Kij&%nEjKY^!+JC94AQ-bY3Naahm`WDfJYSJu>ik#w%yu7XP3>>`1#te;?44fRi z9J~x1nLtCBT@p)D12U7dQ;Uic^U_ldo=so+Y|i|r{p(*gbUy1|`J$)!>Fh0!8=9Uk z+4W>!_xnAwqScKIj7)V641q{pM*+e!G}1LTRF747v2X=YAyh>@Sjmg_&B$t=?AQf0 z9Bk41Jv~nw_5cMF@=9}Z5+M4Y?C52jc(d*B8>-#z)+-1!hcPTvsDWLpo>5A@)Z9eoKYnZ=1oIjNv9NqE}2@%fY$ z&!&SMfgQu|%hfZ0T7dy#1`ZHY1p_lH10yR_Lo7ldQ-eTZ{J3F4 kNo7H*0!U!GZ5Wd<7l;*>m{Xb>J3TRiNoBjlPJtI}0LpOfzyJUM delta 122 zcmV-=0EPd6fJ13;1BGA&g~54B(rq(1`~1rWCfKoBtkw<7Qh*aEi@MG*9A4+aSs01dhi cU<`5#ZVDd>w;`Yq_Xo2;P!0jN7`YJW23xZwzyJUM diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index 025646f8..8a79917b 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -28,6 +28,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index bd36b6aa..c228f986 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -28,6 +28,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index a5c72d0f..6dfe4cb4 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -105,6 +105,10 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange; /** * 透传 SelectInput 筛选器输入框组件的全部属性 */ @@ -575,6 +579,8 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } +export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); + export type DateValue = string | number | Date; export type DateMultipleValue = Array; diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index de20745b..06bf4243 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -26,6 +26,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index ac386758..ddbae033 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -26,6 +26,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts index 76881e82..8117a8a8 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts @@ -97,6 +97,10 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 */ + range: { + type: [Array, Function] as PropType, + }, /** 是否只读,优先级大于 allowInput */ readonly: { type: Boolean, diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index 1b2242cd..00113fd7 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -104,6 +104,10 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange; /** * 是否只读,优先级大于 allowInput */ @@ -568,6 +572,8 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } +export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); + export type DateValue = string | number | Date; export type DateMultipleValue = Array; diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index 3b41e46a..1366a4fa 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -26,6 +26,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index b840adc8..70db3c88 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -26,6 +26,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/packages/products/tdesign-vue/src/date-picker/props.ts b/packages/products/tdesign-vue/src/date-picker/props.ts index 43821c6e..259a26ff 100644 --- a/packages/products/tdesign-vue/src/date-picker/props.ts +++ b/packages/products/tdesign-vue/src/date-picker/props.ts @@ -97,6 +97,10 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 */ + range: { + type: [Array, Function] as PropType, + }, /** 是否只读,优先级大于 allowInput */ readonly: { type: Boolean, diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 96ba9bff..5a0c341e 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -104,6 +104,10 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange; /** * 是否只读,优先级大于 allowInput */ @@ -558,6 +562,8 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } +export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); + export type DateValue = string | number | Date; export type DateMultipleValue = Array; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 70bedecb..0a379133 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38377,6 +38377,47 @@ "String" ] }, + { + "id": 1767592971, + "platform_framework": [ + "1", + "2" + ], + "component": "DatePicker", + "field_category": 1, + "field_name": "range", + "field_type": [ + "16", + "32" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-01-05 06:02:51", + "update_time": "2026-01-05 06:02:51", + "event_output": null, + "custom_field_type": "DateRange【type DateRange = [DateValue,DateValue] | ((date: DateValue) => boolean)】", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Array", + "Function" + ] + }, { "id": 1744298977, "platform_framework": [ From 1b098f496043f05925d1f0aeeee4e600dca34fec Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 17:12:20 +0800 Subject: [PATCH 2/6] feat: range range --- db/TDesign.db | Bin 1097728 -> 1097728 bytes .../date-picker/date-picker.en-US.md | 1 + .../components/date-picker/date-picker.md | 3 +- .../packages/components/date-picker/type.ts | 6 ++- .../date-picker/date-picker.en-US.md | 1 + .../components/date-picker/date-picker.md | 3 +- .../date-picker/date-range-picker-props.ts | 4 ++ .../packages/components/date-picker/props.ts | 2 +- .../packages/components/date-picker/type.ts | 6 ++- .../src/date-picker/date-picker.en-US.md | 1 + .../src/date-picker/date-picker.md | 3 +- .../date-picker/date-range-picker-props.ts | 4 ++ .../tdesign-vue/src/date-picker/props.ts | 2 +- .../tdesign-vue/src/date-picker/type.ts | 6 ++- packages/scripts/api.json | 43 +++++++++++++++++- 15 files changed, 76 insertions(+), 9 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index e5a7df9dfee53104d9ac0a1dc3bd1bfbebd8f012..59533724a67ffec4a0ea624aa28afe46271c6604 100644 GIT binary patch delta 432 zcmZo@aBgUDo*>P*e4>mqgz5qBP!Jf{RZBTE)YZ4ir2tMEc~X%4qjtphQ>?= zP7YoUUIq@3G0ZNBC8-4j~kk%FWD|oIDJDnlO4~FT@X`%q6*U!cL=y!TUr^ITbUXg85o)A8W`#tm?{`R zg<$SXRj5&jhI4e_tk~&>VNCMVU+oak<8KjOs0Q@6BG})p(bM_13rxmi^>(1u^VtEy CkF7lb delta 172 zcmV;d08{^ffJ13;1BGA&g~54B(rq(1{01qQbVKoBzmw=rM`%mTLtMG*dK5(ftV01dhi zU<`5#ZVDd>7zY2hF<=Mj1`mW4p(Yyy0U-$&0Syg>UzZTK5R(J%yo{H3wGeRz=9i`B aoS&DlR{}i=<&UrFfQjRPg12F~5T6HklsgOn diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index 8a79917b..6835d386 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -76,6 +76,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | \- | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index c228f986..f6a5911a 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -28,7 +28,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N @@ -76,6 +76,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index 6dfe4cb4..7143520e 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -106,7 +106,7 @@ export interface TdDatePickerProps { */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; /** - * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ range?: DateRange; /** @@ -300,6 +300,10 @@ export interface TdDateRangePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange | [DateRange, DateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index 06bf4243..69e3bacf 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -87,6 +87,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index ddbae033..4c9b7015 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -26,7 +26,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -87,6 +87,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts index dcf49713..a5801a0d 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts @@ -97,6 +97,10 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ + range: { + type: [Array, Function] as PropType, + }, /** 透传给范围输入框 RangeInput 组件的参数 */ rangeInputProps: { type: Object as PropType, diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts index 8117a8a8..724f5f22 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts @@ -97,7 +97,7 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, - /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 */ + /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ range: { type: [Array, Function] as PropType, }, diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index 00113fd7..b1c5da38 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -105,7 +105,7 @@ export interface TdDatePickerProps { */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; /** - * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ range?: DateRange; /** @@ -303,6 +303,10 @@ export interface TdDateRangePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange | [DateRange, DateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index 1366a4fa..c233ea9e 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -87,6 +87,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index 70db3c88..c97925c2 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -26,7 +26,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -87,6 +87,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts index 12bfb6ab..7cb96303 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts @@ -97,6 +97,10 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ + range: { + type: [Array, Function] as PropType, + }, /** 透传给范围输入框 RangeInput 组件的参数 */ rangeInputProps: { type: Object as PropType, diff --git a/packages/products/tdesign-vue/src/date-picker/props.ts b/packages/products/tdesign-vue/src/date-picker/props.ts index 259a26ff..535964c7 100644 --- a/packages/products/tdesign-vue/src/date-picker/props.ts +++ b/packages/products/tdesign-vue/src/date-picker/props.ts @@ -97,7 +97,7 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, - /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 */ + /** 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ range: { type: [Array, Function] as PropType, }, diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 5a0c341e..a8365d23 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -105,7 +105,7 @@ export interface TdDatePickerProps { */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; /** - * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。 + * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ range?: DateRange; /** @@ -298,6 +298,10 @@ export interface TdDateRangePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 + */ + range?: DateRange | [DateRange, DateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 0a379133..b3b31481 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38392,7 +38392,7 @@ ], "field_default_value": "", "field_enum": "", - "field_desc_zh": "日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期,值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束日期。值类型为 Function 则表示返回值为 true 的日期可选。与`disableDate`共用时,`disableDate`优先级更高。", + "field_desc_zh": "日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。", "field_desc_en": null, "field_required": 0, "event_input": "", @@ -41209,6 +41209,47 @@ "String" ] }, + { + "id": 1767604073, + "platform_framework": [ + "1", + "2" + ], + "component": "DateRangePicker", + "field_category": 1, + "field_name": "range", + "field_type": [ + "16", + "32" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-01-05 09:07:53", + "update_time": "2026-01-05 09:07:53", + "event_output": null, + "custom_field_type": "DateRange | [DateRange,DateRange]【type DateRange = [DateValue,DateValue] | ((date: DateValue) => boolean)】", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Array", + "Function" + ] + }, { "id": 2485, "platform_framework": [ From 0af4dea3be505ae0d8795db23c2ae440cbe0945c Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 17:33:26 +0800 Subject: [PATCH 3/6] feat: panelActiveDate --- db/TDesign.db | Bin 1097728 -> 1097728 bytes .../date-picker/date-picker.en-US.md | 6 +- .../components/date-picker/date-picker.md | 6 +- .../packages/components/date-picker/type.ts | 13 +++ .../date-picker/date-picker.en-US.md | 6 +- .../components/date-picker/date-picker.md | 6 +- .../date-picker/date-range-picker-props.ts | 4 + .../packages/components/date-picker/props.ts | 4 + .../packages/components/date-picker/type.ts | 13 +++ .../src/date-picker/date-picker.en-US.md | 6 +- .../src/date-picker/date-picker.md | 6 +- .../date-picker/date-range-picker-props.ts | 4 + .../tdesign-vue/src/date-picker/props.ts | 4 + .../tdesign-vue/src/date-picker/type.ts | 13 +++ packages/scripts/api.json | 82 +++++++++++++++++- 15 files changed, 159 insertions(+), 14 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 59533724a67ffec4a0ea624aa28afe46271c6604..16371e11b4e7e88bcb008b4f6e9fddab833d1b21 100644 GIT binary patch delta 732 zcmZo@aBgUDo*>P*cA|_kW1fC-9JT7@o35Eo=dgeB!iphonF5)dB3)Q4q7!^6i z8F_hIqZv4Ojg1)^t+z{T7r4YYJs^yUd-|6h0;)<}3pJ%!7_~XIfy&aMs_GdyIe0mE z88|?8GfyuNWfiG+OfJbROLa*sN#%Gped)6~^ItY}KI>ljbmodDJJvqkx#iiMjwd_1 zpLKUWTiEt|Rtr!TB;K&c$iT=<*T7KMz*ND&(#qJ-%FqytP(Wf{Y7W8*g&KuuRH6D* z9R*a8)Y!)j6EgEkQj5|OlT*d(#3E6G3>s(suru`ywx z1~32=Q3AjeDFC9GK}OUEWF}{)78Rhnlain?vam9>L=6hC5SlNco^+zjmwa28M7QT{ u5fEe&Zxvmr4on!@;Dphx2#xaG?TuRmG?^F`rmxy2pb1VN+kxqWhaCWYcl~w% delta 184 zcmV;p07w6TfJ13;1BGA&g~54B(rq(1{11pK!LKoB(ow=rM`zyi1YL=XjQ7Y?)l2n1>X z4Z06t3~~!@3Lgm=2LS|Xw=rM`QUn5p6PJOu5EQq7v=ILRmz1~=E0@5y5Gj{RvJfs8 mgcG4A8w3F%2^Rqk4TW0(2n{nc0D(ETcd!uB0k`V75Eci=<2V!m diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index 6835d386..a10aa211 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -23,12 +23,13 @@ label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](htt mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript: `boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | Typescript: `string` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N @@ -70,13 +71,14 @@ format | String | - | \- | N label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript: `string \| Array` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | \- | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index f6a5911a..7edbadaa 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -23,12 +23,13 @@ label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型 mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N @@ -70,13 +71,14 @@ format | String | - | 用于格式化日期,[详细文档](https://day.js.org/ label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index 7143520e..67da3fd3 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -84,6 +84,10 @@ export interface TdDatePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -274,6 +278,10 @@ export interface TdDateRangePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -579,6 +587,11 @@ export interface DisableDateObj { after?: string; } +export interface PanelActiveDate { + year?: DateValue; + month?: DateValue; +} + export interface PresetDate { [name: string]: DateValue | (() => DateValue); } diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index 69e3bacf..be32a8b0 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -21,12 +21,13 @@ label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript: `boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | Typescript: `string` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -81,13 +82,14 @@ format | String | - | \- | N label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript: `string \| Array` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index 4c9b7015..0a612eba 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -21,12 +21,13 @@ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNo mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -81,13 +82,14 @@ format | String | - | 用于格式化日期,[详细文档](https://day.js.org/ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts index a5801a0d..fe306840 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts @@ -67,6 +67,10 @@ export default { type: Boolean, default: true, }, + /** 日期选择器中年月下拉框的选中值 */ + panelActiveDate: { + type: Object as PropType, + }, /** 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 */ panelPreselection: { type: Boolean, diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts index 724f5f22..8fe2e16b 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts @@ -71,6 +71,10 @@ export default { type: Boolean, default: true, }, + /** 日期选择器中年月下拉框的选中值 */ + panelActiveDate: { + type: Object as PropType, + }, /** 占位符 */ placeholder: { type: [String, Array] as PropType, diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index b1c5da38..717e5d8f 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -83,6 +83,10 @@ export interface TdDatePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -277,6 +281,10 @@ export interface TdDateRangePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -572,6 +580,11 @@ export interface DisableDateObj { after?: string; } +export interface PanelActiveDate { + year?: DateValue; + month?: DateValue; +} + export interface PresetDate { [name: string]: DateValue | (() => DateValue); } diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index c233ea9e..41c5061c 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -21,12 +21,13 @@ label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript: `boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N placeholder | String / Array | undefined | Typescript: `string` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -81,13 +82,14 @@ format | String | - | \- | N label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N +panelActiveDate | Object | - | Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript: `string \| Array` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index c97925c2..e36af32b 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -21,12 +21,13 @@ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNo mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -81,13 +82,14 @@ format | String | - | 用于格式化日期,[详细文档](https://day.js.org/ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange,DateRange]` `type DateRange = [DateValue,DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts index 7cb96303..512e7cc2 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts @@ -67,6 +67,10 @@ export default { type: Boolean, default: true, }, + /** 日期选择器中年月下拉框的选中值 */ + panelActiveDate: { + type: Object as PropType, + }, /** 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 */ panelPreselection: { type: Boolean, diff --git a/packages/products/tdesign-vue/src/date-picker/props.ts b/packages/products/tdesign-vue/src/date-picker/props.ts index 535964c7..6aab647a 100644 --- a/packages/products/tdesign-vue/src/date-picker/props.ts +++ b/packages/products/tdesign-vue/src/date-picker/props.ts @@ -71,6 +71,10 @@ export default { type: Boolean, default: true, }, + /** 日期选择器中年月下拉框的选中值 */ + panelActiveDate: { + type: Object as PropType, + }, /** 占位符 */ placeholder: { type: [String, Array] as PropType, diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index a8365d23..77e74980 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -83,6 +83,10 @@ export interface TdDatePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -272,6 +276,10 @@ export interface TdDateRangePickerProps { * @default true */ needConfirm?: boolean; + /** + * 日期选择器中年月下拉框的选中值 + */ + panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -562,6 +570,11 @@ export interface DisableDateObj { after?: string; } +export interface PanelActiveDate { + year?: DateValue; + month?: DateValue; +} + export interface PresetDate { [name: string]: DateValue | (() => DateValue); } diff --git a/packages/scripts/api.json b/packages/scripts/api.json index b3b31481..343e81d8 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38180,6 +38180,45 @@ "Boolean" ] }, + { + "id": 1767605339, + "platform_framework": [ + "1", + "2" + ], + "component": "DatePicker", + "field_category": 1, + "field_name": "panelActiveDate", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "日期选择器中年月下拉框的选中值", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-01-05 09:28:59", + "update_time": "2026-01-05 09:28:59", + "event_output": null, + "custom_field_type": "PanelActiveDate【interface PanelActiveDate {year?: DateValue, month?: DateValue}】", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, { "id": 1007, "platform_framework": [ @@ -38399,7 +38438,7 @@ "create_time": "2026-01-05 06:02:51", "update_time": "2026-01-05 06:02:51", "event_output": null, - "custom_field_type": "DateRange【type DateRange = [DateValue,DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "DateRange【type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, @@ -40973,6 +41012,45 @@ "Boolean" ] }, + { + "id": 1767605471, + "platform_framework": [ + "1", + "2" + ], + "component": "DateRangePicker", + "field_category": 1, + "field_name": "panelActiveDate", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "日期选择器中年月下拉框的选中值", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-01-05 09:31:11", + "update_time": "2026-01-05 09:31:11", + "event_output": null, + "custom_field_type": "PanelActiveDate | [PanelActiveDate, PanelActiveDate]【interface PanelActiveDate {year?: DateValue, month?: DateValue}】", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, { "id": 2801, "platform_framework": [ @@ -41231,7 +41309,7 @@ "create_time": "2026-01-05 09:07:53", "update_time": "2026-01-05 09:07:53", "event_output": null, - "custom_field_type": "DateRange | [DateRange,DateRange]【type DateRange = [DateValue,DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "DateRange | [DateRange, DateRange]【type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, From 292094738288efbf15807e089950ab6a54f91ee1 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 17:56:53 +0800 Subject: [PATCH 4/6] feat: event --- db/TDesign.db | Bin 1097728 -> 1101824 bytes .../date-picker/date-picker.en-US.md | 2 + .../components/date-picker/date-picker.md | 2 + .../packages/components/date-picker/type.ts | 24 ++++++ .../date-picker/date-picker.en-US.md | 8 +- .../components/date-picker/date-picker.md | 8 +- .../date-picker/date-range-picker-props.ts | 7 ++ .../packages/components/date-picker/props.ts | 7 ++ .../packages/components/date-picker/type.ts | 21 +++++ .../src/date-picker/date-picker.en-US.md | 8 +- .../src/date-picker/date-picker.md | 8 +- .../date-picker/date-range-picker-props.ts | 6 ++ .../tdesign-vue/src/date-picker/props.ts | 6 ++ .../tdesign-vue/src/date-picker/type.ts | 21 +++++ packages/scripts/api.json | 74 +++++++++++++++++- 15 files changed, 192 insertions(+), 10 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 16371e11b4e7e88bcb008b4f6e9fddab833d1b21..c30e503702aadd568aaf264673036029758c8d64 100644 GIT binary patch delta 1379 zcmZo@aBf)OJVBcGFarZ4F9b6%PSh}GJiIYsks%Y8-1Li?{JPWSa`|PaU&!D$o~)Z= zzxjYs96K9OG0#G+W)-V;6)Q#{W&&bnAZ7t#Rv=~rVs;?r0Afxc<^p1FAm#yLULfWJ zV*c$aRss)LndMlnY-e{6uw-Ikxd&t#CNNK665(WKVakl|IwG(Z!s`4fux9%U7Xis^ zSq26M9)^4dem1@|UO65quG5@H*w?TMvuHC*GG3qV(7>!W*&#qFsHrJsp{^7Qqc)>9 z2QP0l14pyHu`y6DCkHPFF9Qe2aAudplGLEYy!6z7%;fCUBBp}Gywn`W3FiE`&oDAvxRNb`4+P%O#dUn!^r}YoxU)UNo;!ee`am|091X`ABOV?PrrSH zO-K+;M!|Oa{apfbj5X8s_X^0=KW><4WME{bYhb8rV5(qXX=Q3=1r)#(YO-6X1N4g` z%r8x~sDA1E3HA$7-gw#2`DDl1rwx0aPM28BA_n#l8^}XC3ey`rI7Fu3+9|+Au9qAz zy<}u%YL4b5kWdrfLQPQgaB4I1@}@Iz@B)3*ST8!gf0Mv>>Eg<~YB zK6kUgSr(9j?e*IPW-@J0*dQRuv|Vziz#^9EiTefSPv5my;4ddIrWqJ`qj{sZDstv> zZg)svu4D>oN?oW8NfJOiVM&4)kt90G2_*>*`lksKGb>|5)Bpqv4Vg57C7I($6To66 f86H3W&@4+){D6~r(Lp{)GN)3$)x=2TxZ(%^35vR# delta 373 zcmZoz;M~yQJVBawEdv814+9iT)G%jUyD?#r;q<_#T*A|JYk7F48)P#IOqa{$mz{ng zgWq_vZjSxt14eP|Y$j%nd|Z;vDpu_(R*XQ*1jNih%mT!$K+Fcj>_E%`#GF9P1;pGy z%mc){K+Ffk{M%Km1Rk(5%douI&h8*!$+X=tfqezj_7^S!lG)NMSqxkZ2@Jfu_!D@F zxbwK=IVBhp*y@?vm?|b42Dofrvt2-vNsMcurW6aKHm5ctFK;>n2d}X)Lt{O|bc4+T z-^Cjf7HR+`6;UKj8KygJ5jZQ(w}nYm8l+PksIy%Wsx@=F)>eUkjN65`3e05Meq^V> zVwUOb`vv}puVG=7 diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index a10aa211..39b6443c 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -46,6 +46,7 @@ onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
T onConfirm | Function | | Typescript: `(context: { date: Date, e: MouseEvent }) => void`
| N onFocus | Function | | Typescript: `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue) => void`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -95,6 +96,7 @@ onConfirm | Function | | Typescript: `(context: { date: Date[], e: MouseEvent, onFocus | Function | | Typescript: `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onInput | Function | | Typescript: `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue, context: PickContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
| N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index 7edbadaa..628ffc31 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -46,6 +46,7 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onConfirm | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮,则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型:`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue) => void`
面板选中值后触发 | N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -95,6 +96,7 @@ onConfirm | Function | | TS 类型:`(context: { date: Date[], e: MouseEvent, onFocus | Function | | TS 类型:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInput | Function | | TS 类型:`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发 | N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue, context: PickContext) => void`
选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发 | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index 67da3fd3..f120029b 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -88,6 +88,10 @@ export interface TdDatePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -190,6 +194,13 @@ export interface TdDatePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: ( + value: number | Date, + context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent }, + ) => void; /** * 面板选中值后触发 */ @@ -282,6 +293,10 @@ export interface TdDateRangePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -405,6 +420,13 @@ export interface TdDateRangePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: ( + value: number | Date, + context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent }, + ) => void; /** * 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期 */ @@ -619,6 +641,8 @@ export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today'; +export type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger | DatePickerYearChangeTrigger; + export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today'; export type DisableRangeDate = diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index be32a8b0..51bf8734 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -21,7 +21,7 @@ label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript: `boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N -panelActiveDate | Object | - | Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +panelActiveDate | Object | - | `v-model:panelActiveDate` is supported。Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | Typescript: `string` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -45,6 +45,7 @@ onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
T onConfirm | Function | | Typescript: `(context: { date: Date, e: MouseEvent }) => void`
| N onFocus | Function | | Typescript: `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue) => void`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -59,6 +60,7 @@ clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clic confirm | `(context: { date: Date, e: MouseEvent })` | \- focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- month-change | `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
+panel-active-date | `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue)` | \- preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
@@ -82,7 +84,7 @@ format | String | - | \- | N label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N -panelActiveDate | Object | - | Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +panelActiveDate | Object | - | `v-model:panelActiveDate` is supported。Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript: `string \| Array` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N @@ -107,6 +109,7 @@ onConfirm | Function | | Typescript: `(context: { date: Date[], e: MouseEvent, onFocus | Function | | Typescript: `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onInput | Function | | Typescript: `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue, context: PickContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
| N @@ -121,6 +124,7 @@ confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPart focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \- input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \- month-change | `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | \- +panel-active-date | `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | \- diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index 0a612eba..e60964f1 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -21,7 +21,7 @@ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNo mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N -panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。支持语法糖 `v-model:panelActiveDate`。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -45,6 +45,7 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onConfirm | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮,则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型:`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue) => void`
面板选中值后触发 | N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -59,6 +60,7 @@ clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确定”按钮,则点击“确定”按钮时触发 focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 输入框获得焦点时触发 month-change | `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
+panel-active-date | `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | 年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue)` | 面板选中值后触发 preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
@@ -82,7 +84,7 @@ format | String | - | 用于格式化日期,[详细文档](https://day.js.org/ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N -panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。支持语法糖 `v-model:panelActiveDate`。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N @@ -107,6 +109,7 @@ onConfirm | Function | | TS 类型:`(context: { date: Date[], e: MouseEvent, onFocus | Function | | TS 类型:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInput | Function | | TS 类型:`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发 | N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue, context: PickContext) => void`
选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发 | N @@ -121,6 +124,7 @@ confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPart focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发 input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 month-change | `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发 +panel-active-date | `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | 年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue, context: PickContext)` | 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发 diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts index fe306840..6764bdc1 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-range-picker-props.ts @@ -70,6 +70,11 @@ export default { /** 日期选择器中年月下拉框的选中值 */ panelActiveDate: { type: Object as PropType, + default: undefined as TdDateRangePickerProps['panelActiveDate'], + }, + /** 日期选择器中年月下拉框的选中值,非受控属性 */ + defaultPanelActiveDate: { + type: Object as PropType, }, /** 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 */ panelPreselection: { @@ -180,6 +185,8 @@ export default { onInput: Function as PropType, /** 月份切换发生变化时触发 */ onMonthChange: Function as PropType, + /** 年月下拉框选中值变化时触发 */ + onPanelActiveDate: Function as PropType, /** 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期 */ onPick: Function as PropType, /** 点击预设按钮后触发 */ diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts index 8fe2e16b..5f53f10f 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/props.ts @@ -74,6 +74,11 @@ export default { /** 日期选择器中年月下拉框的选中值 */ panelActiveDate: { type: Object as PropType, + default: undefined as TdDatePickerProps['panelActiveDate'], + }, + /** 日期选择器中年月下拉框的选中值,非受控属性 */ + defaultPanelActiveDate: { + type: Object as PropType, }, /** 占位符 */ placeholder: { @@ -179,6 +184,8 @@ export default { onFocus: Function as PropType, /** 月份切换发生变化时触发 */ onMonthChange: Function as PropType, + /** 年月下拉框选中值变化时触发 */ + onPanelActiveDate: Function as PropType, /** 面板选中值后触发 */ onPick: Function as PropType, /** 点击预设按钮后触发 */ diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index 717e5d8f..69c3e73c 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -87,6 +87,10 @@ export interface TdDatePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -198,6 +202,10 @@ export interface TdDatePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: (value: number | Date, context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent }) => void; /** * 面板选中值后触发 */ @@ -285,6 +293,10 @@ export interface TdDateRangePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -408,6 +420,13 @@ export interface TdDateRangePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: ( + value: number | Date, + context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent }, + ) => void; /** * 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期 */ @@ -612,6 +631,8 @@ export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today'; +export type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger | DatePickerYearChangeTrigger; + export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today'; export type DisableRangeDate = diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index 41c5061c..3176b24d 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -21,7 +21,7 @@ label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript: `boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N -panelActiveDate | Object | - | Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +panelActiveDate | Object | - | `.sync` is supported。Typescript: `PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N placeholder | String / Array | undefined | Typescript: `string` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -45,6 +45,7 @@ onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
T onConfirm | Function | | Typescript: `(context: { date: Date, e: MouseEvent }) => void`
| N onFocus | Function | | Typescript: `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue) => void`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -59,6 +60,7 @@ clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clic confirm | `(context: { date: Date, e: MouseEvent })` | \- focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- month-change | `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
+panel-active-date | `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue)` | \- preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
@@ -82,7 +84,7 @@ format | String | - | \- | N label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N -panelActiveDate | Object | - | Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +panelActiveDate | Object | - | `.sync` is supported。Typescript: `PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript: `string \| Array` | N popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -107,6 +109,7 @@ onConfirm | Function | | Typescript: `(context: { date: Date[], e: MouseEvent, onFocus | Function | | Typescript: `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onInput | Function | | Typescript: `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
| N onMonthChange | Function | | Typescript: `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
| N +onPanelActiveDate | Function | | Typescript: `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | Typescript: `(value: DateValue, context: PickContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | Typescript: `(context: { preset: PresetDate, e: MouseEvent }) => void`
| N onYearChange | Function | | Typescript: `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
| N @@ -121,6 +124,7 @@ confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPart focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \- input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \- month-change | `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | \- +panel-active-date | `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | \- diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index e36af32b..de46b489 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -21,7 +21,7 @@ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNo mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N -panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。支持语法糖 `.sync`。TS 类型:`PanelActiveDate` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -45,6 +45,7 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onConfirm | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮,则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型:`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
| N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue) => void`
面板选中值后触发 | N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N @@ -59,6 +60,7 @@ clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确定”按钮,则点击“确定”按钮时触发 focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 输入框获得焦点时触发 month-change | `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`
+panel-active-date | `(value: number \| Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | 年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue)` | 面板选中值后触发 preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
@@ -82,7 +84,7 @@ format | String | - | 用于格式化日期,[详细文档](https://day.js.org/ label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N -panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +panelActiveDate | Object | - | 日期选择器中年月下拉框的选中值。支持语法糖 `.sync`。TS 类型:`PanelActiveDate \| [PanelActiveDate, PanelActiveDate]` `interface PanelActiveDate {year?: DateValue, month?: DateValue}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -107,6 +109,7 @@ onConfirm | Function | | TS 类型:`(context: { date: Date[], e: MouseEvent, onFocus | Function | | TS 类型:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInput | Function | | TS 类型:`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 | N onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`
月份切换发生变化时触发 | N +onPanelActiveDate | Function | | TS 类型:`(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent }) => void`
年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
| N onPick | Function | | TS 类型:`(value: DateValue, context: PickContext) => void`
选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N onYearChange | Function | | TS 类型:`(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发 | N @@ -121,6 +124,7 @@ confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPart focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发 input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 month-change | `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发 +panel-active-date | `(value: number \| Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent })` | 年月下拉框选中值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger \| DatePickerYearChangeTrigger`
pick | `(value: DateValue, context: PickContext)` | 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发 diff --git a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts index 512e7cc2..78a99f2a 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts @@ -71,6 +71,10 @@ export default { panelActiveDate: { type: Object as PropType, }, + /** 日期选择器中年月下拉框的选中值,非受控属性 */ + defaultPanelActiveDate: { + type: Object as PropType, + }, /** 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 */ panelPreselection: { type: Boolean, @@ -176,6 +180,8 @@ export default { onInput: Function as PropType, /** 月份切换发生变化时触发 */ onMonthChange: Function as PropType, + /** 年月下拉框选中值变化时触发 */ + onPanelActiveDate: Function as PropType, /** 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期 */ onPick: Function as PropType, /** 点击预设按钮后触发 */ diff --git a/packages/products/tdesign-vue/src/date-picker/props.ts b/packages/products/tdesign-vue/src/date-picker/props.ts index 6aab647a..def1e268 100644 --- a/packages/products/tdesign-vue/src/date-picker/props.ts +++ b/packages/products/tdesign-vue/src/date-picker/props.ts @@ -75,6 +75,10 @@ export default { panelActiveDate: { type: Object as PropType, }, + /** 日期选择器中年月下拉框的选中值,非受控属性 */ + defaultPanelActiveDate: { + type: Object as PropType, + }, /** 占位符 */ placeholder: { type: [String, Array] as PropType, @@ -175,6 +179,8 @@ export default { onFocus: Function as PropType, /** 月份切换发生变化时触发 */ onMonthChange: Function as PropType, + /** 年月下拉框选中值变化时触发 */ + onPanelActiveDate: Function as PropType, /** 面板选中值后触发 */ onPick: Function as PropType, /** 点击预设按钮后触发 */ diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 77e74980..6462b991 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -87,6 +87,10 @@ export interface TdDatePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate; /** * 占位符 */ @@ -193,6 +197,10 @@ export interface TdDatePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: (value: number | Date, context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent }) => void; /** * 面板选中值后触发 */ @@ -280,6 +288,10 @@ export interface TdDateRangePickerProps { * 日期选择器中年月下拉框的选中值 */ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; + /** + * 日期选择器中年月下拉框的选中值,非受控属性 + */ + defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate]; /** * 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 * @default true @@ -398,6 +410,13 @@ export interface TdDateRangePickerProps { e?: MouseEvent; trigger: DatePickerMonthChangeTrigger; }) => void; + /** + * 年月下拉框选中值变化时触发 + */ + onPanelActiveDate?: ( + value: number | Date, + context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent }, + ) => void; /** * 选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期 */ @@ -602,6 +621,8 @@ export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today'; +export type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger | DatePickerYearChangeTrigger; + export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today'; export type DisableRangeDate = diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 343e81d8..f5af9d32 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38202,7 +38202,7 @@ "update_time": "2026-01-05 09:28:59", "event_output": null, "custom_field_type": "PanelActiveDate【interface PanelActiveDate {year?: DateValue, month?: DateValue}】", - "syntactic_sugar": null, + "syntactic_sugar": "sync", "readonly": 1, "html_attribute": 0, "trigger_elements": "", @@ -39065,6 +39065,41 @@ ], "field_type_text": [] }, + { + "id": 1767606777, + "platform_framework": [ + "1", + "2" + ], + "component": "DatePicker", + "field_category": 2, + "field_name": "panelActiveDate", + "field_type": [], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "年月下拉框选中值变化时触发", + "field_desc_en": null, + "field_required": 0, + "event_input": "(value: number | Date, context: { trigger: DatePickerPanelActiveDate, e?: MouseEvent })【type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger | DatePickerYearChangeTrigger】", + "create_time": "2026-01-05 09:52:57", + "update_time": "2026-01-05 09:52:57", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [] + }, { "id": 2693, "platform_framework": [ @@ -41034,7 +41069,7 @@ "update_time": "2026-01-05 09:31:11", "event_output": null, "custom_field_type": "PanelActiveDate | [PanelActiveDate, PanelActiveDate]【interface PanelActiveDate {year?: DateValue, month?: DateValue}】", - "syntactic_sugar": null, + "syntactic_sugar": "sync", "readonly": 1, "html_attribute": 0, "trigger_elements": "", @@ -41928,6 +41963,41 @@ ], "field_type_text": [] }, + { + "id": 1767606980, + "platform_framework": [ + "1", + "2" + ], + "component": "DateRangePicker", + "field_category": 2, + "field_name": "panelActiveDate", + "field_type": [], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "年月下拉框选中值变化时触发", + "field_desc_en": null, + "field_required": 0, + "event_input": "(value: number | Date, context: { partial: DateRangePickerPartial, trigger: DatePickerPanelActiveDate, e?: MouseEvent })【type DatePickerPanelActiveDate = DatePickerMonthChangeTrigger | DatePickerYearChangeTrigger】", + "create_time": "2026-01-05 09:56:20", + "update_time": "2026-01-05 09:56:20", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [] + }, { "id": 1828, "platform_framework": [ From 0ce2f25a6e7a0cfd6c998ad902fa3ec0a2baf54f Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 18:42:16 +0800 Subject: [PATCH 5/6] fix: duplicate type --- db/TDesign.db | Bin 1101824 -> 1101824 bytes .../date-picker/date-picker.en-US.md | 4 ++-- .../components/date-picker/date-picker.md | 4 ++-- .../packages/components/date-picker/type.ts | 6 +++--- .../date-picker/date-picker.en-US.md | 4 ++-- .../components/date-picker/date-picker.md | 4 ++-- .../packages/components/date-picker/type.ts | 6 +++--- .../src/date-picker/date-picker.en-US.md | 4 ++-- .../src/date-picker/date-picker.md | 4 ++-- .../tdesign-vue/src/date-picker/type.ts | 6 +++--- packages/scripts/api.json | 4 ++-- 11 files changed, 23 insertions(+), 23 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index c30e503702aadd568aaf264673036029758c8d64..ba6b95981dbf4bfc928b5c62679c2ee9ae4a2c09 100644 GIT binary patch delta 277 zcmZoz;M}mld4e?K(TOt7j7J+2S`!#s6PQ{Pm|GKAS`%1X6WCf4*jp1gS`#>16S!Iv zxLXr=S`&C%6Zl#a__rnqEL$(-&A`vbm&Pl{BgJ)^^9a))25*i#?5Ef|SQRE4255`7 z>Mm55W?|Ik6ldh+ZC7OA;59a8Xp-HowN*ff$tfT+IXkt;C9xzmC^0WRRiQ>98cj$? z0ZkzGal?d?%7Rp=`1HD+0&e0h3JcYMwkU#aX^n>1(ipt`@OFV!jIwAZU>e}Qyt0RS|MTE74Q delta 240 zcmZoz;M}mld4e?K;fXTNjE5T&S`!#s6PQ{Pm|GKAS`%1X6WCf4*jp1gS`#>16S!Iv zxLXr=S`&C%6Zl#a__rnqEL$&;&%n>dm&Pl{BgJ)^^9cJIR$&%xW=Y2D(;XU^^(H$6 zC^0r|SJ*1BghjknbfLO53!^rtI3q7_yCMSzudy*hWA65(4FW<;N-l{dsX>W(>8T1e z3ej+mjslz+JKZphNo)F_EdnayEg}omfJP~TjcSdC8fCp*c(cGNMozdExDM6rM|TQX Giva-g&qt#G diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index 39b6443c..8cee6a2d 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -29,7 +29,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N @@ -79,7 +79,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | \- | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index 628ffc31..1a1db07f 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -29,7 +29,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N @@ -79,7 +79,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index f120029b..5ffd0bda 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -116,7 +116,7 @@ export interface TdDatePickerProps { /** * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange; + range?: PickerDateRange; /** * 透传 SelectInput 筛选器输入框组件的全部属性 */ @@ -326,7 +326,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange | [DateRange, DateRange]; + range?: PickerDateRange | [PickerDateRange, PickerDateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -618,7 +618,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index 51bf8734..566d53ed 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -27,7 +27,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index e60964f1..1ce89425 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index 69c3e73c..22864a7d 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -115,7 +115,7 @@ export interface TdDatePickerProps { /** * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange; + range?: PickerDateRange; /** * 是否只读,优先级大于 allowInput */ @@ -326,7 +326,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange | [DateRange, DateRange]; + range?: PickerDateRange | [PickerDateRange, PickerDateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -608,7 +608,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index 3176b24d..cd038f12 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -27,7 +27,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index de46b489..36ba484f 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`DateRange \| [DateRange, DateRange]` `type DateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 6462b991..4a6dcf35 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -115,7 +115,7 @@ export interface TdDatePickerProps { /** * 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange; + range?: PickerDateRange; /** * 是否只读,优先级大于 allowInput */ @@ -321,7 +321,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: DateRange | [DateRange, DateRange]; + range?: PickerDateRange | [PickerDateRange, PickerDateRange]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -598,7 +598,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index f5af9d32..4b44f616 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38438,7 +38438,7 @@ "create_time": "2026-01-05 06:02:51", "update_time": "2026-01-05 06:02:51", "event_output": null, - "custom_field_type": "DateRange【type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "PickerDateRange【type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, @@ -41344,7 +41344,7 @@ "create_time": "2026-01-05 09:07:53", "update_time": "2026-01-05 09:07:53", "event_output": null, - "custom_field_type": "DateRange | [DateRange, DateRange]【type DateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "PickerDateRange | [PickerDateRange, PickerDateRange]【type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, From a8bc56344fbdd5dc9a04cfa727a40b538339cc70 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Mon, 5 Jan 2026 19:33:51 +0800 Subject: [PATCH 6/6] chore: range type --- db/TDesign.db | Bin 1101824 -> 1101824 bytes .../date-picker/date-picker.en-US.md | 4 ++-- .../components/date-picker/date-picker.md | 4 ++-- .../packages/components/date-picker/type.ts | 4 ++-- .../date-picker/date-picker.en-US.md | 4 ++-- .../components/date-picker/date-picker.md | 4 ++-- .../packages/components/date-picker/type.ts | 4 ++-- .../src/date-picker/date-picker.en-US.md | 4 ++-- .../src/date-picker/date-picker.md | 4 ++-- .../tdesign-vue/src/date-picker/type.ts | 4 ++-- packages/scripts/api.json | 4 ++-- 11 files changed, 20 insertions(+), 20 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index ba6b95981dbf4bfc928b5c62679c2ee9ae4a2c09..f79252b2c57e47e544ecd40b54d435c8031a7875 100644 GIT binary patch delta 282 zcmZoz;M}mld4e?K$%!(~j3*ltS`!#s6PQ{Pm|GKAS`%1X6WCf4*jp1gS`#>16S!Iv zxLXr=S`&C%6Zl#a__rnqEL<@ERMph{DBqVPXu8w%dg_3tVR8c1bKr4NJ@^O^uG7 zo*2QTV#C0|pb9iX8*D_oBG?FqCRqkf4qgsk29C_=`b=h*R>6hpP({4FFhz~2+mkj3 js4xizWF}{)7J*C-O3X_KnS5r8fE0#R+ZDD7Jdgqarj<%O delta 229 zcmZoz;M}mld4e?K(TOt7j7J+2S`!#s6PQ{Pm|GKAS`%1X6WCf4*jp1gS`#>16S!Iv zxLXr=S`&C%6Zl#a__rnqEL<}I#?AZ z8wO~Lx9Tobmu6wq<`ie-EXD{K{bAO!%C CFhcJD diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md index 8cee6a2d..96005782 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.en-US.md @@ -29,7 +29,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N @@ -79,7 +79,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | \- | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md index 1a1db07f..9116c41e 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-react/packages/components/date-picker/date-picker.md @@ -29,7 +29,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N @@ -79,7 +79,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/products/tdesign-react/packages/components/date-picker/type.ts b/packages/products/tdesign-react/packages/components/date-picker/type.ts index 5ffd0bda..381303b2 100644 --- a/packages/products/tdesign-react/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-react/packages/components/date-picker/type.ts @@ -326,7 +326,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: PickerDateRange | [PickerDateRange, PickerDateRange]; + range?: PickerDateRange | PickerDateRange[]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -618,7 +618,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md index 566d53ed..0a174562 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.en-US.md @@ -27,7 +27,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md index 1ce89425..8f2322db 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/date-picker.md @@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts index 22864a7d..32ca7a06 100644 --- a/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/date-picker/type.ts @@ -326,7 +326,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: PickerDateRange | [PickerDateRange, PickerDateRange]; + range?: PickerDateRange | PickerDateRange[]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -608,7 +608,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index cd038f12..100f84b3 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md @@ -27,7 +27,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | Whether it is read only, the priority is greater than allowInput | N selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./pop prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript: `PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -range | Array / Function | - | Typescript: `PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | Typescript: `PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | Typescript: `RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | Whether it is read only, the priority is greater than allowInput | N separator | String | - | \- | N diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index 36ba484f..dffe3750 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md @@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | undefined | 是否只读,优先级大于 allowInput | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -91,7 +91,7 @@ popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupPr prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| [PickerDateRange, PickerDateRange]` `type PickerDateRange = [DateValue, DateValue] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +range | Array / Function | - | 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。。TS 类型:`PickerDateRange \| PickerDateRange[]` `type PickerDateRange = DateValue[] \| ((date: DateValue) => boolean)`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N readonly | Boolean | - | 是否只读,优先级大于 `allowInput` | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 4a6dcf35..775ad430 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -321,7 +321,7 @@ export interface TdDateRangePickerProps { /** * 日期可选择范围。值为数组则第一项是开始面板的可选范围,第二项是结束面板的可选范围。示例:['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制,例如['2025-01-01', null]表示可选日期从'2025-01-01'开始,不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时,`disableDate`优先级更高。 */ - range?: PickerDateRange | [PickerDateRange, PickerDateRange]; + range?: PickerDateRange | PickerDateRange[]; /** * 透传给范围输入框 RangeInput 组件的参数 */ @@ -598,7 +598,7 @@ export interface PresetDate { [name: string]: DateValue | (() => DateValue); } -export type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean); +export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean); export type DateValue = string | number | Date; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 4b44f616..d0298ff9 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -38438,7 +38438,7 @@ "create_time": "2026-01-05 06:02:51", "update_time": "2026-01-05 06:02:51", "event_output": null, - "custom_field_type": "PickerDateRange【type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "PickerDateRange【type PickerDateRange = DateValue[] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, @@ -41344,7 +41344,7 @@ "create_time": "2026-01-05 09:07:53", "update_time": "2026-01-05 09:07:53", "event_output": null, - "custom_field_type": "PickerDateRange | [PickerDateRange, PickerDateRange]【type PickerDateRange = [DateValue, DateValue] | ((date: DateValue) => boolean)】", + "custom_field_type": "PickerDateRange | PickerDateRange[]【type PickerDateRange = DateValue[] | ((date: DateValue) => boolean)】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0,