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>

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