diff --git a/db/TDesign.db b/db/TDesign.db
index 2165aeb9..f79252b2 100644
Binary files a/db/TDesign.db and b/db/TDesign.db differ
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..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
@@ -23,11 +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: `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
@@ -44,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
@@ -69,12 +72,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: `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
@@ -91,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 bd36b6aa..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
@@ -23,11 +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 类型：`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
@@ -44,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
@@ -69,12 +72,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 类型：`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
@@ -91,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 a5c72d0f..381303b2 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,14 @@ export interface TdDatePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate;
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate;
/**
* 占位符
*/
@@ -105,6 +113,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?: PickerDateRange;
/**
* 透传 SelectInput 筛选器输入框组件的全部属性
*/
@@ -182,6 +194,13 @@ export interface TdDatePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (
+ value: number | Date,
+ context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent },
+ ) => void;
/**
* 面板选中值后触发
*/
@@ -270,6 +289,14 @@ export interface TdDateRangePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
/**
* 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
* @default true
@@ -296,6 +323,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?: PickerDateRange | PickerDateRange[];
/**
* 透传给范围输入框 RangeInput 组件的参数
*/
@@ -389,6 +420,13 @@ export interface TdDateRangePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (
+ value: number | Date,
+ context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent },
+ ) => void;
/**
* 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期
*/
@@ -571,10 +609,17 @@ export interface DisableDateObj {
after?: string;
}
+export interface PanelActiveDate {
+ year?: DateValue;
+ month?: DateValue;
+}
+
export interface PresetDate {
[name: string]: DateValue | (() => DateValue);
}
+export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean);
+
export type DateValue = string | number | Date;
export type DateMultipleValue = Array;
@@ -596,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 de20745b..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
@@ -21,11 +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 | - | `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
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[] \| ((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
@@ -43,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
@@ -57,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'`
@@ -80,12 +84,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 | - | `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
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[]` `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
@@ -103,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
@@ -117,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 ac386758..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
@@ -21,11 +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 | - | 日期选择器中年月下拉框的选中值。支持语法糖 `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
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[] \| ((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
@@ -43,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
@@ -57,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'`
@@ -80,12 +84,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 | - | 日期选择器中年月下拉框的选中值。支持语法糖 `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
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[]` `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
@@ -103,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
@@ -117,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 dcf49713..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
@@ -67,6 +67,15 @@ export default {
type: Boolean,
default: true,
},
+ /** 日期选择器中年月下拉框的选中值 */
+ panelActiveDate: {
+ type: Object as PropType,
+ default: undefined as TdDateRangePickerProps['panelActiveDate'],
+ },
+ /** 日期选择器中年月下拉框的选中值，非受控属性 */
+ defaultPanelActiveDate: {
+ type: Object as PropType,
+ },
/** 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 */
panelPreselection: {
type: Boolean,
@@ -97,6 +106,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,
@@ -172,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 76881e82..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
@@ -71,6 +71,15 @@ export default {
type: Boolean,
default: true,
},
+ /** 日期选择器中年月下拉框的选中值 */
+ panelActiveDate: {
+ type: Object as PropType,
+ default: undefined as TdDatePickerProps['panelActiveDate'],
+ },
+ /** 日期选择器中年月下拉框的选中值，非受控属性 */
+ defaultPanelActiveDate: {
+ type: Object as PropType,
+ },
/** 占位符 */
placeholder: {
type: [String, Array] as PropType,
@@ -97,6 +106,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,
@@ -171,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 1b2242cd..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
@@ -83,6 +83,14 @@ export interface TdDatePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate;
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate;
/**
* 占位符
*/
@@ -104,6 +112,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?: PickerDateRange;
/**
* 是否只读，优先级大于 allowInput
*/
@@ -190,6 +202,10 @@ export interface TdDatePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (value: number | Date, context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent }) => void;
/**
* 面板选中值后触发
*/
@@ -273,6 +289,14 @@ export interface TdDateRangePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
/**
* 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
* @default true
@@ -299,6 +323,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?: PickerDateRange | PickerDateRange[];
/**
* 透传给范围输入框 RangeInput 组件的参数
*/
@@ -392,6 +420,13 @@ export interface TdDateRangePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (
+ value: number | Date,
+ context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent },
+ ) => void;
/**
* 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期
*/
@@ -564,10 +599,17 @@ export interface DisableDateObj {
after?: string;
}
+export interface PanelActiveDate {
+ year?: DateValue;
+ month?: DateValue;
+}
+
export interface PresetDate {
[name: string]: DateValue | (() => DateValue);
}
+export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean);
+
export type DateValue = string | number | Date;
export type DateMultipleValue = Array;
@@ -589,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 3b41e46a..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
@@ -21,11 +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 | - | `.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
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[] \| ((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
@@ -43,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
@@ -57,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'`
@@ -80,12 +84,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 | - | `.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
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[]` `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
@@ -103,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
@@ -117,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 b840adc8..dffe3750 100644
--- a/packages/products/tdesign-vue/src/date-picker/date-picker.md
+++ b/packages/products/tdesign-vue/src/date-picker/date-picker.md
@@ -21,11 +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 | - | 日期选择器中年月下拉框的选中值。支持语法糖 `.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
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[] \| ((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
@@ -43,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
@@ -57,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'`
@@ -80,12 +84,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 | - | 日期选择器中年月下拉框的选中值。支持语法糖 `.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
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[]` `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
@@ -103,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
@@ -117,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 12bfb6ab..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
@@ -67,6 +67,14 @@ export default {
type: Boolean,
default: true,
},
+ /** 日期选择器中年月下拉框的选中值 */
+ panelActiveDate: {
+ type: Object as PropType,
+ },
+ /** 日期选择器中年月下拉框的选中值，非受控属性 */
+ defaultPanelActiveDate: {
+ type: Object as PropType,
+ },
/** 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 */
panelPreselection: {
type: Boolean,
@@ -97,6 +105,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,
@@ -168,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 43821c6e..def1e268 100644
--- a/packages/products/tdesign-vue/src/date-picker/props.ts
+++ b/packages/products/tdesign-vue/src/date-picker/props.ts
@@ -71,6 +71,14 @@ export default {
type: Boolean,
default: true,
},
+ /** 日期选择器中年月下拉框的选中值 */
+ panelActiveDate: {
+ type: Object as PropType,
+ },
+ /** 日期选择器中年月下拉框的选中值，非受控属性 */
+ defaultPanelActiveDate: {
+ type: Object as PropType,
+ },
/** 占位符 */
placeholder: {
type: [String, Array] as PropType,
@@ -97,6 +105,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,
@@ -167,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 96ba9bff..775ad430 100644
--- a/packages/products/tdesign-vue/src/date-picker/type.ts
+++ b/packages/products/tdesign-vue/src/date-picker/type.ts
@@ -83,6 +83,14 @@ export interface TdDatePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate;
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate;
/**
* 占位符
*/
@@ -104,6 +112,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?: PickerDateRange;
/**
* 是否只读，优先级大于 allowInput
*/
@@ -185,6 +197,10 @@ export interface TdDatePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (value: number | Date, context: { trigger: DatePickerPanelActiveDate; e?: MouseEvent }) => void;
/**
* 面板选中值后触发
*/
@@ -268,6 +284,14 @@ export interface TdDateRangePickerProps {
* @default true
*/
needConfirm?: boolean;
+ /**
+ * 日期选择器中年月下拉框的选中值
+ */
+ panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
+ /**
+ * 日期选择器中年月下拉框的选中值，非受控属性
+ */
+ defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
/**
* 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
* @default true
@@ -294,6 +318,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?: PickerDateRange | PickerDateRange[];
/**
* 透传给范围输入框 RangeInput 组件的参数
*/
@@ -382,6 +410,13 @@ export interface TdDateRangePickerProps {
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
+ /**
+ * 年月下拉框选中值变化时触发
+ */
+ onPanelActiveDate?: (
+ value: number | Date,
+ context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent },
+ ) => void;
/**
* 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期
*/
@@ -554,10 +589,17 @@ export interface DisableDateObj {
after?: string;
}
+export interface PanelActiveDate {
+ year?: DateValue;
+ month?: DateValue;
+}
+
export interface PresetDate {
[name: string]: DateValue | (() => DateValue);
}
+export type PickerDateRange = DateValue[] | ((date: DateValue) => boolean);
+
export type DateValue = string | number | Date;
export type DateMultipleValue = Array;
@@ -579,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 70bedecb..d0298ff9 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": "sync",
+ "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": [
@@ -38377,6 +38416,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": "PickerDateRange【type PickerDateRange = 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": [
@@ -38985,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": [
@@ -40932,6 +41047,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": "sync",
+ "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": [
@@ -41168,6 +41322,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": "PickerDateRange | PickerDateRange[]【type PickerDateRange = 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": [
@@ -41768,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": [