diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue index 572eb71234..e2984ac0de 100644 --- a/packages/components/time-picker/src/common/picker.vue +++ b/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() @@ -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 | 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(() => {