fix(components): [time-picker] injected form context may be undefined (#8866)

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

@@ -171,8 +171,12 @@
 import { computed, inject, nextTick, provide, ref, unref, watch } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { onClickOutside } from '@vueuse/core'
-import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
-import { formContextKey, formItemContextKey } from '@element-plus/tokens'
+import {
+  useFormItem,
+  useLocale,
+  useNamespace,
+  useSize,
+} from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
 import ElIcon from '@element-plus/components/icon'
 import ElTooltip from '@element-plus/components/tooltip'
@@ -185,7 +189,6 @@ import { timePickerDefaultProps } from './props'
 import type { Dayjs } from 'dayjs'
 import type { ComponentPublicInstance } from 'vue'
 import type { Options } from '@popperjs/core'
-import type { FormContext, FormItemContext } from '@element-plus/tokens'
 import type {
   DateModelType,
   DateOrDates,
@@ -221,8 +224,7 @@ const nsDate = useNamespace('date')
 const nsInput = useNamespace('input')
 const nsRange = useNamespace('range')
 
-const elForm = inject(formContextKey, {} as FormContext)
-const elFormItem = inject(formItemContextKey, {} as FormItemContext)
+const { form, formItem } = useFormItem()
 const elPopperOptions = inject('ElPopperOptions', {} as Options)
 
 const refPopper = ref<TooltipInstance>()
@@ -252,7 +254,7 @@ const emitChange = (
   if (isClear || !valueEquals(val, valueOnOpen.value)) {
     emit('change', val)
     props.validateEvent &&
-      elFormItem.validate?.('change').catch((err) => debugWarn(err))
+      formItem?.validate('change').catch((err) => debugWarn(err))
   }
 }
 const emitInput = (input: SingleOrRange<DateModelType | Dayjs> | null) => {
@@ -382,7 +384,7 @@ const handleBlurInput = (e?: FocusEvent) => {
           pickerVisible.value = false
           emit('blur', e)
           props.validateEvent &&
-            elFormItem.validate?.('blur').catch((err) => debugWarn(err))
+            formItem?.validate('blur').catch((err) => debugWarn(err))
         }
         hasJustTabExitedInput = false
       }
@@ -393,7 +395,7 @@ const handleBlurInput = (e?: FocusEvent) => {
 }
 
 const pickerDisabled = computed(() => {
-  return props.disabled || elForm.disabled
+  return props.disabled || form?.disabled
 })
 
 const parsedValue = computed(() => {