feat(timepicker): support onPick API

src/time-picker/_example/hms.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-time-picker v-model="value" @change="timechange" @open="open" @close="close" />
+  <t-time-picker v-model="value" @change="timechange" @open="open" @close="close" @pick="pick" />
 </template>
 
 <script>
@@ -20,6 +20,9 @@ export default {
     close() {
       console.log('close');
     },
+    pick(v) {
+      console.log(v, 'vv');
+    },
   },
 };
 </script>

src/time-picker/_example/range.vue

@@ -1,6 +1,6 @@
 <template>
   <t-space>
-    <t-time-range-picker class="demos" clearable v-model="time" format="HH:mm:ss" allow-input />
+    <t-time-range-picker class="demos" clearable v-model="time" format="HH:mm:ss" allow-input @pick="handleRangePick" />
   </t-space>
 </template>
 
@@ -12,5 +12,10 @@ export default {
       time: ['00:00:00', '23:59:59'],
     };
   },
+  methods: {
+    handleRangePick(v) {
+      console.log('picked range time is', v);
+    },
+  },
 };
 </script>

src/time-picker/panel/single-panel.tsx

@@ -146,6 +146,7 @@ export default defineComponent({
         else count = 59;
 
         const colList = range(0, count + 1, Number(colStep)).map((v) => padStart(String(v), 2, '0')) || [];
+
         return props.hideDisabledTime && !!props.disableTime
           ? colList.filter((t) => {
             const params: [number, number, number] = [
@@ -360,7 +361,7 @@ export default defineComponent({
               >
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {timeArr.includes(col)
-                  ? TWELVE_HOUR_FORMAT.test(this.format) && el === '00'
+                  ? TWELVE_HOUR_FORMAT.test(this.format) && col === EPickerCols.hour && el === '00'
                     ? '12'
                     : el
                   : this.global[el === AM ? 'anteMeridiem' : 'postMeridiem']}

src/time-picker/panel/time-picker-panel.tsx

@@ -20,6 +20,7 @@ export default defineComponent({
     ...panelProps(),
     handleConfirmClick: Function,
     onChange: Function,
+    onPick: Function,
     disableTime: Function,
   },
   setup(props, ctx) {
@@ -50,8 +51,12 @@ export default defineComponent({
     };
 
     const handleChange = (v: string) => {
+      // 触发onPick事件
+      props.onPick?.(v);
+      ctx.emit('pick', v); // 处理直接使用panel的场景 支持@/v-on语法
+
       props.onChange?.(v);
-      ctx.emit('change', v);
+      ctx.emit('change', v); // 处理直接使用panel的场景 支持@/v-on语法
     };
     const handlePresetClick = (presetValue: TimePickerValue | (() => TimePickerValue)) => {
       const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
@@ -98,6 +103,7 @@ export default defineComponent({
               props: {
                 value: this.value,
                 onChange: this.handleChange,
+                onPick: this.onPick,
                 format: this.format || DEFAULT_FORMAT,
                 steps: this.steps || DEFAULT_STEPS,
                 triggerScroll: this.triggerScroll,

src/time-picker/props.ts

@@ -81,4 +81,6 @@ export default {
   onInput: Function as PropType<TdTimePickerProps['onInput']>,
   /** 面板打开时触发 */
   onOpen: Function as PropType<TdTimePickerProps['onOpen']>,
+  /** 面板选中值后触发 */
+  onPick: Function as PropType<TdTimePickerProps['onPick']>,
 };

src/time-picker/time-picker.en-US.md

@@ -25,6 +25,7 @@ onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>
 onFocus | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
 onInput | Function |  | Typescript：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
 onOpen | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: TimePickerValue) => void`<br/> | N
 
 ### TimePicker Events
 
@@ -36,6 +37,7 @@ close | `(context: { e: MouseEvent })` | \-
 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \-
 input | `(context: { value: TimePickerValue; e: InputEvent })` | \-
 open | `(context: { e: MouseEvent })` | \-
+pick | `(value: TimePickerValue)` | \-
 
 ### TimeRangePicker Props
 
@@ -59,6 +61,7 @@ onBlur | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: Focu
 onChange | Function |  | Typescript：`(value: TimeRangeValue) => void`<br/> | N
 onFocus | Function |  | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
 onInput | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
+onPick | Function |  | Typescript：`(value: TimeRangeValue, context: { position?: TimeRangePickerPartial }) => void`<br/> | N
 
 ### TimeRangePicker Events
 
@@ -68,3 +71,4 @@ blur | `(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangeP
 change | `(value: TimeRangeValue)` | \-
 focus | `(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
 input | `(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
+pick | `(value: TimeRangeValue, context: { position?: TimeRangePickerPartial })` | \-

src/time-picker/time-picker.md

@@ -25,6 +25,7 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 onFocus | Function |  | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发，value 表示组件当前有效值 | N
 onInput | Function |  | TS 类型：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/>当输入框内容发生变化时触发，参数 value 表示组件当前有效值 | N
 onOpen | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>面板打开时触发 | N
+onPick | Function |  | TS 类型：`(value: TimePickerValue) => void`<br/>面板选中值后触发 | N
 
 ### TimePicker Events
 
@@ -36,6 +37,7 @@ close | `(context: { e: MouseEvent })` | 面板关闭时触发
 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | 输入框获得焦点时触发，value 表示组件当前有效值
 input | `(context: { value: TimePickerValue; e: InputEvent })` | 当输入框内容发生变化时触发，参数 value 表示组件当前有效值
 open | `(context: { e: MouseEvent })` | 面板打开时触发
+pick | `(value: TimePickerValue)` | 面板选中值后触发
 
 ### TimeRangePicker Props
 
@@ -59,6 +61,7 @@ onBlur | Function |  | TS 类型：`(context: { value: TimeRangeValue; e?: Focus
 onChange | Function |  | TS 类型：`(value: TimeRangeValue) => void`<br/>选中值发生变化时触发 | N
 onFocus | Function |  | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
 onInput | Function |  | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
+onPick | Function |  | TS 类型：`(value: TimeRangeValue, context: { position?: TimeRangePickerPartial }) => void`<br/>面板选中值后触发 | N
 
 ### TimeRangePicker Events
 
@@ -68,3 +71,4 @@ blur | `(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangeP
 change | `(value: TimeRangeValue)` | 选中值发生变化时触发
 focus | `(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) ` | 范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
 input | `(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  }) ` | 当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
+pick | `(value: TimeRangeValue, context: { position?: TimeRangePickerPartial })` | 面板选中值后触发

src/time-picker/time-picker.tsx

@@ -88,6 +88,11 @@ export default defineComponent({
       ctx.emit('focus', context);
     };
 
+    const handleOnPick = (v: string) => {
+      props.onPick?.(v);
+      ctx.emit('pick', v);
+    };
+
     watch(
       () => isShowPanel.value,
       () => {
@@ -103,6 +108,7 @@ export default defineComponent({
       handleClear,
       handleShowPopup,
       handleOnFocus,
+      handleOnPick,
       inputClasses,
       componentName,
       innerValue,
@@ -144,6 +150,7 @@ export default defineComponent({
                       isShowPanel: this.isShowPanel,
                       disableTime: this.disableTime,
                       onChange: this.handlePanelChange,
+                      onPick: this.handleOnPick,
                       hideDisabledTime: this.hideDisabledTime,
                       handleConfirmClick: this.handleClickConfirm,
                       presets: this.presets,

src/time-picker/time-range-picker-props.ts

@@ -78,4 +78,6 @@ export default {
   onFocus: Function as PropType<TdTimeRangePickerProps['onFocus']>,
   /** 当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 */
   onInput: Function as PropType<TdTimeRangePickerProps['onInput']>,
+  /** 面板选中值后触发 */
+  onPick: Function as PropType<TdTimeRangePickerProps['onPick']>,
 };

src/time-picker/time-range-picker.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
     popupProps: Object,
   },
 
-  setup(props) {
+  setup(props, ctx) {
     const componentName = usePrefixClass('time-range-picker');
     const { global } = useConfig('timePicker');
     const { classPrefix } = useConfig('classPrefix');
@@ -97,6 +97,7 @@ export default defineComponent({
     ) => {
       currentValue.value = inputVal;
       props.onInput?.({ value: innerValue.value, e, position: position === 'first' ? 'start' : 'end' });
+      ctx.emit('input', { value: innerValue.value, e, position: position === 'first' ? 'start' : 'end' });
     };
 
     const handleClickConfirm = () => {
@@ -107,6 +108,21 @@ export default defineComponent({
 
     const handleFocus = (value: TimeRangeValue, { e, position }: { e: FocusEvent; position: RangeInputPosition }) => {
       props.onFocus?.({ value, e, position: position === 'first' ? 'start' : 'end' });
+      ctx.emit('focus', { value, e, position: position === 'first' ? 'start' : 'end' });
+    };
+
+    const handleOnPick = (pickValue: string) => {
+      let pickedRangeValue = [];
+      let context = {};
+      if (currentPanelIdx.value === 0) {
+        pickedRangeValue = [pickValue, currentValue.value[1] ?? pickValue];
+        context = { position: 'start' };
+      } else {
+        pickedRangeValue = [currentValue.value[0] ?? pickValue, pickValue];
+        context = { position: 'end' };
+      }
+      props.onPick?.(pickedRangeValue, context);
+      ctx.emit('pick', pickedRangeValue, context);
     };
 
     watch(
@@ -128,6 +144,7 @@ export default defineComponent({
       handleShowPopup,
       handleClear,
       handleFocus,
+      handleOnPick,
       handleClickConfirm,
       handleClick,
       handleInputBlur,
@@ -182,6 +199,7 @@ export default defineComponent({
                       isFooterDisplay: true,
                       value: this.currentValue[this.currentPanelIdx || 0],
                       onChange: this.handleTimeChange,
+                      onPick: this.handleOnPick,
                       handleConfirmClick: this.handleClickConfirm,
                       position: this.currentPanelIdx === 0 ? 'start' : 'end',
                       activeIndex: this.currentPanelIdx,

src/time-picker/type.ts

@@ -102,6 +102,10 @@ export interface TdTimePickerProps {
    * 面板打开时触发
    */
   onOpen?: (context: { e: MouseEvent }) => void;
+  /**
+   * 面板选中值后触发
+   */
+  onPick?: (value: TimePickerValue) => void;
 }
 
 export interface TdTimeRangePickerProps {
@@ -189,6 +193,10 @@ export interface TdTimeRangePickerProps {
    * 当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值
    */
   onInput?: (context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void;
+  /**
+   * 面板选中值后触发
+   */
+  onPick?: (value: TimeRangeValue, context: { position?: TimeRangePickerPartial }) => void;
 }
 
 export interface PresetTime {