Skip to content

Commit 850f9e4

Browse files
Wesley-0808tdesign-bot
Wesley-0808
and
tdesign-bot
authored
feat(timePicker): add onConfirm Event (#5349)
* feat: support * chore: props * chore: props * feat: onClear * chore: typo & docs * chore: onClear * chore: typo * chore: rangePicker * chore: stash changelog [ci skip] --------- Co-authored-by: tdesign-bot <[email protected]>
1 parent d61f023 commit 850f9e4

File tree

8 files changed

+56
-18
lines changed

8 files changed

+56
-18
lines changed

‎packages/components/time-picker/panel/time-picker-panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default defineComponent({
124124
theme="primary"
125125
variant="base"
126126
disabled={!props.value}
127-
onClick={() => props.handleConfirmClick?.(defaultValue.value)}
127+
onClick={(e) => props.handleConfirmClick?.(e, defaultValue.value)}
128128
size="small"
129129
>
130130
{globalConfig.value.confirm}

‎packages/components/time-picker/props.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@ export default {
4646
type: String,
4747
default: undefined,
4848
},
49-
/** 透传给 popup 组件的参数 */
49+
/** 透传 Popup 组件全部属性 */
5050
popupProps: {
5151
type: Object as PropType<TdTimePickerProps['popupProps']>,
5252
},
5353
/** 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }` */
5454
presets: {
5555
type: Object as PropType<TdTimePickerProps['presets']>,
5656
},
57-
/** 只读状态 */
57+
/** 只读状态，优先级大于 `allowInput` */
5858
readonly: {
5959
type: Boolean,
6060
default: undefined,
@@ -112,8 +112,12 @@ export default {
112112
onBlur: Function as PropType<TdTimePickerProps['onBlur']>,
113113
/** 选中值发生变化时触发 */
114114
onChange: Function as PropType<TdTimePickerProps['onChange']>,
115+
/** 点击清空按钮时触发 */
116+
onClear: Function as PropType<TdTimePickerProps['onClear']>,
115117
/** 面板关闭时触发 */
116118
onClose: Function as PropType<TdTimePickerProps['onClose']>,
119+
/** 点击确认按钮时触发 */
120+
onConfirm: Function as PropType<TdTimePickerProps['onConfirm']>,
117121
/** 输入框获得焦点时触发，value 表示组件当前有效值 */
118122
onFocus: Function as PropType<TdTimePickerProps['onFocus']>,
119123
/** 当输入框内容发生变化时触发，参数 value 表示组件当前有效值 */

‎packages/components/time-picker/time-picker.en-US.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValu
3030
valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: TimePickerValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
3131
onBlur | Function | | Typescript：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
3232
onChange | Function | | Typescript：`(value: TimePickerValue) => void`<br/> | N
33+
onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/>Triggered when the clear button is clicked | N
3334
onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
35+
onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
3436
onFocus | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
3537
onInput | Function | | Typescript：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
3638
onOpen | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -42,7 +44,9 @@ name | params | description
4244
-- | -- | --
4345
blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/>
4446
change | `(value: TimePickerValue)` | \-
47+
clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clicked
4548
close | `(context: { e: MouseEvent })` | \-
49+
confirm | `(context: { e: MouseEvent })` | \-
4650
focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \-
4751
input | `(context: { value: TimePickerValue; e: InputEvent })` | \-
4852
open | `(context: { e: MouseEvent })` | \-
@@ -54,9 +58,10 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
5458
name | type | default | description | required
5559
-- | -- | -- | -- | --
5660
allowInput | Boolean | false | \- | N
61+
autoSwap | Boolean | true | \- | N
5762
borderless | Boolean | false | \- | N
5863
clearable | Boolean | false | \- | N
59-
disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
64+
disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
6065
disabled | Boolean / Array | undefined | Typescript：`boolean \| Array<boolean>` | N
6166
format | String | HH:mm:ss | \- | N
6267
hideDisabledTime | Boolean | true | \- | N

‎packages/components/time-picker/time-picker.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
1616
inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
1717
label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
1818
placeholder | String | undefined | 占位符 | N
19-
popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
19+
popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
2020
presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
21-
readonly | Boolean | undefined | 是否只读，优先级大于 `allowInput` | N
21+
readonly | Boolean | undefined | 只读状态，优先级大于 `allowInput` | N
2222
selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
2323
size | String | medium | 尺寸。可选项：small/medium/large | N
2424
status | String | default | 输入框状态。可选项：default/success/warning/error | N
@@ -29,7 +29,9 @@ defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePicke
2929
valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: TimePickerValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
3030
onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
3131
onChange | Function | | TS 类型：`(value: TimePickerValue) => void`<br/>选中值发生变化时触发 | N
32+
onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击清空按钮时触发 | N
3233
onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>面板关闭时触发 | N
34+
onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击确认按钮时触发 | N
3335
onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发，value 表示组件当前有效值 | N
3436
onInput | Function | | TS 类型：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/>当输入框内容发生变化时触发，参数 value 表示组件当前有效值 | N
3537
onOpen | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>面板打开时触发 | N
@@ -41,7 +43,9 @@ onPick | Function | | TS 类型：`(value: TimePickerValue, context: { e: Mouse
4143
-- | -- | --
4244
blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | 当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/>
4345
change | `(value: TimePickerValue)` | 选中值发生变化时触发
46+
clear | `(context: { e: MouseEvent })` | 点击清空按钮时触发
4447
close | `(context: { e: MouseEvent })` | 面板关闭时触发
48+
confirm | `(context: { e: MouseEvent })` | 点击确认按钮时触发
4549
focus | `(context: { value: TimePickerValue; e: FocusEvent })` | 输入框获得焦点时触发，value 表示组件当前有效值
4650
input | `(context: { value: TimePickerValue; e: InputEvent })` | 当输入框内容发生变化时触发，参数 value 表示组件当前有效值
4751
open | `(context: { e: MouseEvent })` | 面板打开时触发
@@ -56,13 +60,13 @@ allowInput | Boolean | false | 是否允许直接输入时间 | N
5660
autoSwap | Boolean | true | 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false | N
5761
borderless | Boolean | false | 无边框模式 | N
5862
clearable | Boolean | false | 是否允许清除选中值 | N
59-
disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
63+
disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
6064
disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
6165
format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
6266
hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
6367
label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
6468
placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N
65-
popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
69+
popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
6670
presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
6771
rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/time-picker/type.ts) | N
6872
size | String | medium | 尺寸。可选项：small/medium/large | N

‎packages/components/time-picker/time-picker.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default defineComponent({
5858
e.stopPropagation();
5959
currentValue.value = null;
6060
setInnerValue(null);
61+
props?.onClear?.(context);
6162
};
6263

6364
const handleInputChange = (value: string) => {
@@ -74,7 +75,8 @@ export default defineComponent({
7475
props.onBlur?.({ value, inputValue: context.inputValue, e: context.e });
7576
};
7677

77-
const handleClickConfirm = () => {
78+
const handleClickConfirm = (e: MouseEvent) => {
79+
props?.onConfirm?.({ e });
7880
const isValidTime = validateInputValue(currentValue.value, format.value);
7981
if (isValidTime) setInnerValue(currentValue.value);
8082
isShowPanel.value = false;

‎packages/components/time-picker/time-range-picker-props.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default {
4747
type: [String, Array] as PropType<TdTimeRangePickerProps['placeholder']>,
4848
default: undefined as TdTimeRangePickerProps['placeholder'],
4949
},
50-
/** 透传给 popup 组件的参数 */
50+
/** 透传 Popup 组件全部属性 */
5151
popupProps: {
5252
type: Object as PropType<TdTimeRangePickerProps['popupProps']>,
5353
},
@@ -59,7 +59,7 @@ export default {
5959
rangeInputProps: {
6060
type: Object as PropType<TdTimeRangePickerProps['rangeInputProps']>,
6161
},
62-
/** 只读状态 */
62+
/** 只读状态，优先级大于 `allowInput` */
6363
readonly: {
6464
type: Boolean,
6565
default: undefined,

‎packages/components/time-picker/type.ts

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,6 @@ export interface TdTimePickerProps {
1717
* @default false
1818
*/
1919
allowInput?: boolean;
20-
/**
21-
* 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false
22-
* @default true
23-
*/
24-
autoSwap?: boolean;
2520
/**
2621
* 无边框模式
2722
* @default false
@@ -68,13 +63,17 @@ export interface TdTimePickerProps {
6863
*/
6964
placeholder?: string;
7065
/**
71-
* 透传给 popup 组件的参数
66+
* 透传 Popup 组件全部属性
7267
*/
7368
popupProps?: PopupProps;
7469
/**
7570
* 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`
7671
*/
7772
presets?: PresetTime;
73+
/**
74+
* 只读状态，优先级大于 `allowInput`
75+
*/
76+
readonly?: boolean;
7877
/**
7978
* 透传 SelectInput 筛选器输入框组件的全部属性
8079
*/
@@ -125,10 +124,18 @@ export interface TdTimePickerProps {
125124
* 选中值发生变化时触发
126125
*/
127126
onChange?: (value: TimePickerValue) => void;
127+
/**
128+
* 点击清空按钮时触发
129+
*/
130+
onClear?: (context: { e: MouseEvent }) => void;
128131
/**
129132
* 面板关闭时触发
130133
*/
131134
onClose?: (context: { e: MouseEvent }) => void;
135+
/**
136+
* 点击确认按钮时触发
137+
*/
138+
onConfirm?: (context: { e: MouseEvent }) => void;
132139
/**
133140
* 输入框获得焦点时触发，value 表示组件当前有效值
134141
*/
@@ -153,6 +160,11 @@ export interface TdTimeRangePickerProps {
153160
* @default false
154161
*/
155162
allowInput?: boolean;
163+
/**
164+
* 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false
165+
* @default true
166+
*/
167+
autoSwap?: boolean;
156168
/**
157169
* 无边框模式
158170
* @default false
@@ -170,6 +182,7 @@ export interface TdTimeRangePickerProps {
170182
h: number,
171183
m: number,
172184
s: number,
185+
ms: number,
173186
context: { partial: TimeRangePickerPartial },
174187
) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number> }>;
175188
/**
@@ -195,7 +208,7 @@ export interface TdTimeRangePickerProps {
195208
*/
196209
placeholder?: string | Array<string>;
197210
/**
198-
* 透传给 popup 组件的参数
211+
* 透传 Popup 组件全部属性
199212
*/
200213
popupProps?: PopupProps;
201214
/**
@@ -206,6 +219,10 @@ export interface TdTimeRangePickerProps {
206219
* 透传给范围输入框 RangeInput 组件的参数
207220
*/
208221
rangeInputProps?: RangeInputProps;
222+
/**
223+
* 只读状态，优先级大于 `allowInput`
224+
*/
225+
readonly?: boolean;
209226
/**
210227
* 尺寸
211228
* @default medium

‎packages/tdesign-vue-next/.changelog/pr-5349.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
pr_number: 5349
3+
contributor: Wesley-0808
4+
---
5+
6+
- feat(TimePicker): 新增`onConfirm` 和`onClear` 回调方法 @Wesley-0808 ([#5349](https://github.com/Tencent/tdesign-vue-next/pull/5349))

0 commit comments

Comments
 (0)