fix(components): [time-picker] fix range input without default id issue

fix time-picker type range input elements without default id value

closed #16802

packages/components/time-picker/src/common/picker.vue

@@ -96,39 +96,43 @@
         >
           <component :is="triggerIcon" />
         </el-icon>
-        <input
-          :id="id && id[0]"
-          autocomplete="off"
-          :name="name && name[0]"
-          :placeholder="startPlaceholder"
-          :value="displayValue && displayValue[0]"
-          :disabled="pickerDisabled"
-          :readonly="!editable || readonly"
-          :class="nsRange.b('input')"
-          @mousedown="onMouseDownInput"
-          @input="handleStartInput"
-          @change="handleStartChange"
-          @focus="handleFocusInput"
-          @blur="handleBlurInput"
-        />
-        <slot name="range-separator">
-          <span :class="nsRange.b('separator')">{{ rangeSeparator }}</span>
-        </slot>
-        <input
-          :id="id && id[1]"
-          autocomplete="off"
-          :name="name && name[1]"
-          :placeholder="endPlaceholder"
-          :value="displayValue && displayValue[1]"
-          :disabled="pickerDisabled"
-          :readonly="!editable || readonly"
-          :class="nsRange.b('input')"
-          @mousedown="onMouseDownInput"
-          @focus="handleFocusInput"
-          @blur="handleBlurInput"
-          @input="handleEndInput"
-          @change="handleEndChange"
-        />
+        <range-input-id-provider :id="id">
+          <template #default="{ inputIdForStart, inputIdForEnd }">
+            <input
+              :id="inputIdForStart"
+              autocomplete="off"
+              :name="name && name[0]"
+              :placeholder="startPlaceholder"
+              :value="displayValue && displayValue[0]"
+              :disabled="pickerDisabled"
+              :readonly="!editable || readonly"
+              :class="nsRange.b('input')"
+              @mousedown="onMouseDownInput"
+              @input="handleStartInput"
+              @change="handleStartChange"
+              @focus="handleFocusInput"
+              @blur="handleBlurInput"
+            />
+            <slot name="range-separator">
+              <span :class="nsRange.b('separator')">{{ rangeSeparator }}</span>
+            </slot>
+            <input
+              :id="inputIdForEnd"
+              autocomplete="off"
+              :name="name && name[1]"
+              :placeholder="endPlaceholder"
+              :value="displayValue && displayValue[1]"
+              :disabled="pickerDisabled"
+              :readonly="!editable || readonly"
+              :class="nsRange.b('input')"
+              @mousedown="onMouseDownInput"
+              @focus="handleFocusInput"
+              @blur="handleBlurInput"
+              @input="handleEndInput"
+              @change="handleEndChange"
+            />
+          </template>
+        </range-input-id-provider>
         <el-icon
           v-if="clearIcon"
           :class="clearIconKls"
@@ -188,6 +192,7 @@ import { EVENT_CODE } from '@element-plus/constants'
 import { Calendar, Clock } from '@element-plus/icons-vue'
 import { formatter, parseDate, valueEquals } from '../utils'
 import { timePickerDefaultProps } from './props'
+import RangeInputIdProvider from './range-input-id-provider.vue'
 
 import type { Dayjs } from 'dayjs'
 import type { ComponentPublicInstance } from 'vue'

packages/components/time-picker/src/common/range-input-id-provider.vue

@@ -0,0 +1,35 @@
+<template>
+  <slot
+    :input-id-for-start="inputIdForStart"
+    :input-id-for-end="inputIdForEnd"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import { pick } from 'lodash-unified'
+import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
+import { timePickerDefaultProps } from './props'
+
+const props = defineProps(pick(timePickerDefaultProps, 'id'))
+const propForStart = reactive<{ id?: string }>({})
+const propForEnd = reactive<{ id?: string }>({})
+
+watch(
+  () => props.id,
+  () => {
+    const [startInputId, endInputId] = Array.isArray(props.id) ? props.id : []
+    propForStart.id = startInputId
+    propForEnd.id = endInputId
+  },
+  { immediate: true }
+)
+
+const { formItem } = useFormItem()
+const { inputId: inputIdForStart } = useFormItemInputId(propForStart, {
+  formItemContext: formItem,
+})
+const { inputId: inputIdForEnd } = useFormItemInputId(propForEnd, {
+  formItemContext: formItem,
+})
+</script>