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')