From 3fef855fc07f3116f0149cae82b0cef60faf7bc8 Mon Sep 17 00:00:00 2001
From: catanswer <564029918@qq.com>
Date: Thu, 4 Sep 2025 17:28:04 +0800
Subject: [PATCH] fix(components): [time-picker] range type add id
 automatically (#21746)

* fix(components): [time-picker] range type add id automatically

* Update packages/components/time-picker/src/common/picker-range-trigger.vue

Co-authored-by: Zhong <cszhjh@gmail.com>

* Update packages/components/time-picker/src/common/picker-range-trigger.vue

Co-authored-by: Zhong <cszhjh@gmail.com>

* Update packages/components/time-picker/src/common/picker-range-trigger.vue

* fix: [time-picker] sort the import declaration

* Update packages/components/time-picker/src/common/picker-range-trigger.vue

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

* Update picker-range-trigger.vue

---------

Co-authored-by: yinshenghao <--global>
Co-authored-by: Zhong <cszhjh@gmail.com>
Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
---
 .../time-picker/src/common/picker-range-trigger.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/time-picker/src/common/picker-range-trigger.vue b/packages/components/time-picker/src/common/picker-range-trigger.vue
index a590897111..e324fc3c9f 100644
--- a/packages/components/time-picker/src/common/picker-range-trigger.vue
+++ b/packages/components/time-picker/src/common/picker-range-trigger.vue
@@ -11,7 +11,7 @@
     <slot name="prefix" />
     <input
       v-bind="attrs"
-      :id="id && id[0]"
+      :id="inputId"
       ref="inputRef"
       :name="name && name[0]"
       :placeholder="startPlaceholder"
@@ -39,9 +39,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useAttrs, useFocusController, useNamespace } from '@element-plus/hooks'
 import { timePickerRangeTriggerProps } from './props'
+import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
 
 import type { CSSProperties } from 'vue'
 
@@ -64,6 +65,14 @@ const emit = defineEmits([
   'endChange',
 ])
 
+const { formItem } = useFormItem()
+const { inputId } = useFormItemInputId(
+  reactive({ id: computed(() => props.id?.[0]) }),
+  {
+    formItemContext: formItem,
+  }
+)
+
 const attrs = useAttrs()
 const nsDate = useNamespace('date')
 const nsRange = useNamespace('range')