From 5b233da008c19aeb69899444533807b03e5b43d4 Mon Sep 17 00:00:00 2001
From: Jeremy <15975785+jw-foss@users.noreply.github.com>
Date: Wed, 8 Jun 2022 09:17:23 +0800
Subject: [PATCH] refactor(components): [time-picker] time-picker (#8160)

* refactor(components): [time-picker] time-picker

* Refactor `time-picker` to tsx.

* chore: refactor  to script setup

* chore: fix typing issue in `picker`

* chore: fix API exposing

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
---
 .../date-picker/src/date-picker.tsx           |    1 -
 .../time-picker/src/common/picker.vue         | 1054 ++++++++---------
 .../time-picker/src/common/props.ts           |   65 +-
 .../src/time-picker-com/panel-time-range.vue  |    2 +-
 .../components/time-picker/src/time-picker.ts |   55 -
 .../time-picker/src/time-picker.tsx           |   63 +
 6 files changed, 616 insertions(+), 624 deletions(-)
 delete mode 100644 packages/components/time-picker/src/time-picker.ts
 create mode 100644 packages/components/time-picker/src/time-picker.tsx

diff --git a/packages/components/date-picker/src/date-picker.tsx b/packages/components/date-picker/src/date-picker.tsx
index 01a89042f7..daaa3bf4c6 100644
--- a/packages/components/date-picker/src/date-picker.tsx
+++ b/packages/components/date-picker/src/date-picker.tsx
@@ -49,7 +49,6 @@ export default defineComponent({
 
     const commonPicker = ref<InstanceType<typeof CommonPicker>>()
     const refProps = {
-      ...props,
       focus: (focusStartInput = true) => {
         commonPicker.value?.focus(focusStartInput)
       },
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index cdab300ece..3408cebaec 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -23,10 +23,10 @@
     <template #default>
       <el-input
         v-if="!isRangeInput"
-        :id="id"
+        :id="(id as string | undefined)"
         ref="inputRef"
         container-role="combobox"
-        :model-value="displayValue"
+        :model-value="(displayValue as string)"
         :name="name"
         :size="pickerSize"
         :disabled="pickerDisabled"
@@ -39,7 +39,7 @@
         @input="onUserInput"
         @focus="handleFocusInput"
         @blur="handleBlurInput"
-        @keydown="handleKeydownInput"
+        @keydown="handleKeydownInput as any"
         @change="handleChange"
         @mousedown="onMouseDownInput"
         @mouseenter="onMouseEnter"
@@ -80,7 +80,7 @@
           pickerSize ? nsRange.bm('editor', pickerSize) : '',
           $attrs.class,
         ]"
-        :style="$attrs.style"
+        :style="($attrs.style as any)"
         @click="handleFocusInput"
         @mousedown="onMouseDownInput"
         @mouseenter="onMouseEnter"
@@ -162,17 +162,8 @@
     </template>
   </el-tooltip>
 </template>
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  nextTick,
-  provide,
-  ref,
-  unref,
-  watch,
-} from 'vue'
+<script lang="ts" setup>
+import { computed, inject, nextTick, provide, ref, unref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { isEqual } from 'lodash-unified'
 import { onClickOutside } from '@vueuse/core'
@@ -181,27 +172,24 @@ import { formContextKey, formItemContextKey } from '@element-plus/tokens'
 import ElInput from '@element-plus/components/input'
 import ElIcon from '@element-plus/components/icon'
 import ElTooltip from '@element-plus/components/tooltip'
-import { debugWarn, isEmpty } from '@element-plus/utils'
+import { debugWarn, isArray, isEmpty } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { Calendar, Clock } from '@element-plus/icons-vue'
 import { timePickerDefaultProps } from './props'
 
 import type { Dayjs } from 'dayjs'
 import type { ComponentPublicInstance } from 'vue'
-import type { FormContext, FormItemContext } from '@element-plus/tokens'
 import type { Options } from '@popperjs/core'
-
-interface PickerOptions {
-  isValidValue: (date: Dayjs) => boolean
-  handleKeydownInput: (event: KeyboardEvent) => void
-  parseUserInput: (value: Dayjs) => dayjs.Dayjs
-  formatToString: (value: Dayjs) => string | string[]
-  getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs
-  getDefaultValue: () => Dayjs
-  panelReady: boolean
-  handleClear: () => void
-  handleFocusPicker?: () => void
-}
+import type { FormContext, FormItemContext } from '@element-plus/tokens'
+import type {
+  DateModelType,
+  DateOrDates,
+  DayOrDays,
+  PickerOptions,
+  SingleOrRange,
+  TimePickerDefaultProps,
+  UserInput,
+} from './props'
 
 // Date object and string
 const dateEquals = function (a: Date | any, b: Date | any) {
@@ -217,8 +205,8 @@ const dateEquals = function (a: Date | any, b: Date | any) {
 }
 
 const valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {
-  const aIsArray = Array.isArray(a)
-  const bIsArray = Array.isArray(b)
+  const aIsArray = isArray(a)
+  const bIsArray = isArray(b)
   if (aIsArray && bIsArray) {
     if (a.length !== b.length) {
       return false
@@ -231,11 +219,11 @@ const valueEquals = function (a: Array<Date> | any, b: Array<Date> | any) {
   return false
 }
 
-const parser = function (
+const parseDate = function (
   date: string | number | Date,
-  format: string,
+  format: string | undefined,
   lang: string
-): Dayjs {
+) {
   const day =
     isEmpty(format) || format === 'x'
       ? dayjs(date).locale(lang)
@@ -244,8 +232,8 @@ const parser = function (
 }
 
 const formatter = function (
-  date: string | number | Date,
-  format: string,
+  date: string | number | Date | Dayjs,
+  format: string | undefined,
   lang: string
 ) {
   if (isEmpty(format)) return date
@@ -253,555 +241,537 @@ const formatter = function (
   return dayjs(date).locale(lang).format(format)
 }
 
-export default defineComponent({
+defineOptions({
   name: 'Picker',
-  components: {
-    ElInput,
-    ElTooltip,
-    ElIcon,
-  },
-  props: timePickerDefaultProps,
-  emits: [
-    'update:modelValue',
-    'change',
-    'focus',
-    'blur',
-    'calendar-change',
-    'panel-change',
-    'visible-change',
-    'keydown',
-  ],
-  setup(props, ctx) {
-    const { lang } = useLocale()
+})
 
-    const nsDate = useNamespace('date')
-    const nsInput = useNamespace('input')
-    const nsRange = useNamespace('range')
+const props = defineProps(timePickerDefaultProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'focus',
+  'blur',
+  'calendar-change',
+  'panel-change',
+  'visible-change',
+  'keydown',
+])
 
-    const elForm = inject(formContextKey, {} as FormContext)
-    const elFormItem = inject(formItemContextKey, {} as FormItemContext)
-    const elPopperOptions = inject('ElPopperOptions', {} as Options)
+const { lang } = useLocale()
 
-    const refPopper = ref<InstanceType<typeof ElTooltip>>()
-    const inputRef = ref<HTMLElement | ComponentPublicInstance>()
-    const pickerVisible = ref(false)
-    const pickerActualVisible = ref(false)
-    const valueOnOpen = ref(null)
+const nsDate = useNamespace('date')
+const nsInput = useNamespace('input')
+const nsRange = useNamespace('range')
 
-    let hasJustTabExitedInput = false
-    let ignoreFocusEvent = false
+const elForm = inject(formContextKey, {} as FormContext)
+const elFormItem = inject(formItemContextKey, {} as FormItemContext)
+const elPopperOptions = inject('ElPopperOptions', {} as Options)
 
-    watch(pickerVisible, (val) => {
-      if (!val) {
-        userInput.value = null
-        nextTick(() => {
-          emitChange(props.modelValue)
-        })
-      } else {
-        valueOnOpen.value = props.modelValue
-      }
+const refPopper = ref<InstanceType<typeof ElTooltip>>()
+const inputRef = ref<HTMLElement | ComponentPublicInstance>()
+const pickerVisible = ref(false)
+const pickerActualVisible = ref(false)
+const valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)
+
+let hasJustTabExitedInput = false
+let ignoreFocusEvent = false
+
+watch(pickerVisible, (val) => {
+  if (!val) {
+    userInput.value = null
+    nextTick(() => {
+      emitChange(props.modelValue)
     })
-    const emitChange = (val, isClear?: boolean) => {
-      // determine user real change only
-      if (isClear || !valueEquals(val, valueOnOpen.value)) {
-        ctx.emit('change', val)
-        props.validateEvent &&
-          elFormItem.validate?.('change').catch((err) => debugWarn(err))
-      }
-    }
-    const emitInput = (val) => {
-      if (!valueEquals(props.modelValue, val)) {
-        let formatValue
-        if (Array.isArray(val)) {
-          formatValue = val.map((_) =>
-            formatter(_, props.valueFormat, lang.value)
-          )
-        } else if (val) {
-          formatValue = formatter(val, props.valueFormat, lang.value)
-        }
-        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)
-      }
-    }
-    const emitKeydown = (e) => {
-      ctx.emit('keydown', e)
-    }
-    const refInput = computed<HTMLInputElement[]>(() => {
-      if (inputRef.value) {
-        const _r = isRangeInput.value
-          ? inputRef.value
-          : (inputRef.value as any as ComponentPublicInstance).$el
-        return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))
-      }
-      return []
-    })
-    const refStartInput = computed(() => {
-      return refInput?.value[0]
-    })
-    const refEndInput = computed(() => {
-      return refInput?.value[1]
-    })
-
-    const setSelectionRange = (start, end, pos) => {
-      const _inputs = refInput.value
-      if (!_inputs.length) return
-      if (!pos || pos === 'min') {
-        _inputs[0].setSelectionRange(start, end)
-        _inputs[0].focus()
-      } else if (pos === 'max') {
-        _inputs[1].setSelectionRange(start, end)
-        _inputs[1].focus()
-      }
-    }
-    const focusOnInputBox = () => {
-      focus(true, true)
-      nextTick(() => {
-        ignoreFocusEvent = false
-      })
-    }
-
-    const onPick = (date: any = '', visible = false) => {
-      if (!visible) {
-        focusOnInputBox()
-      }
-      pickerVisible.value = visible
-      let result
-      if (Array.isArray(date)) {
-        result = date.map((_) => _.toDate())
-      } else {
-        // clear btn emit null
-        result = date ? date.toDate() : date
-      }
-      userInput.value = null
-      emitInput(result)
-    }
-
-    const onBeforeShow = () => {
-      pickerActualVisible.value = true
-    }
-
-    const onShow = () => {
-      ctx.emit('visible-change', true)
-    }
-
-    const onKeydownPopperContent = (event: KeyboardEvent) => {
-      if ((event as KeyboardEvent)?.key === EVENT_CODE.esc) {
-        focus(true, true)
-      }
-    }
-
-    const onHide = () => {
-      pickerActualVisible.value = false
-      ignoreFocusEvent = false
-      ctx.emit('visible-change', false)
-    }
-
-    const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
-      ignoreFocusEvent = isIgnoreFocusEvent
-      let input = refStartInput.value
-      if (!focusStartInput && isRangeInput.value) {
-        input = refEndInput.value
-      }
-      if (input) {
-        input.focus()
-      }
-    }
-
-    const handleFocusInput = (e) => {
-      if (
-        props.readonly ||
-        pickerDisabled.value ||
-        pickerVisible.value ||
-        ignoreFocusEvent
-      ) {
-        return
-      }
-      pickerVisible.value = true
-      ctx.emit('focus', e)
-    }
-
-    let currentHandleBlurDeferCallback: () => void | undefined
-
-    // Check if document.activeElement is inside popper or any input before popper close
-    const handleBlurInput = (e) => {
-      const handleBlurDefer = async () => {
-        setTimeout(() => {
-          if (currentHandleBlurDeferCallback === handleBlurDefer) {
-            if (
-              !(
-                refPopper.value?.isFocusInsideContent() &&
-                !hasJustTabExitedInput
-              ) &&
-              refInput.value.filter((input) => {
-                return input.contains(document.activeElement)
-              }).length === 0
-            ) {
-              handleChange()
-              pickerVisible.value = false
-              ctx.emit('blur', e)
-              props.validateEvent &&
-                elFormItem.validate?.('blur').catch((err) => debugWarn(err))
-            }
-            hasJustTabExitedInput = false
-          }
-        }, 0)
-      }
-      currentHandleBlurDeferCallback = handleBlurDefer
-      handleBlurDefer()
-    }
-
-    const pickerDisabled = computed(() => {
-      return props.disabled || elForm.disabled
-    })
-
-    const parsedValue = computed(() => {
-      let result
-      if (valueIsEmpty.value) {
-        if (pickerOptions.value.getDefaultValue) {
-          result = pickerOptions.value.getDefaultValue()
-        }
-      } else {
-        if (Array.isArray(props.modelValue)) {
-          result = props.modelValue.map((_) =>
-            parser(_, props.valueFormat, lang.value)
-          )
-        } else {
-          result = parser(props.modelValue, props.valueFormat, lang.value)
-        }
-      }
-
-      if (pickerOptions.value.getRangeAvailableTime) {
-        const availableResult =
-          pickerOptions.value.getRangeAvailableTime(result)
-        if (!isEqual(availableResult, result)) {
-          result = availableResult
-          emitInput(
-            Array.isArray(result)
-              ? result.map((_) => _.toDate())
-              : result.toDate()
-          )
-        }
-      }
-      if (Array.isArray(result) && result.some((_) => !_)) {
-        result = []
-      }
-      return result
-    })
-
-    const displayValue = computed(() => {
-      if (!pickerOptions.value.panelReady) return
-      const formattedValue = formatDayjsToString(parsedValue.value)
-      if (Array.isArray(userInput.value)) {
-        return [
-          userInput.value[0] || (formattedValue && formattedValue[0]) || '',
-          userInput.value[1] || (formattedValue && formattedValue[1]) || '',
-        ]
-      } else if (userInput.value !== null) {
-        return userInput.value
-      }
-      if (!isTimePicker.value && valueIsEmpty.value) return
-      if (!pickerVisible.value && valueIsEmpty.value) return
-      if (formattedValue) {
-        return isDatesPicker.value
-          ? (formattedValue as Array<string>).join(', ')
-          : formattedValue
-      }
-      return ''
-    })
-
-    const isTimeLikePicker = computed(() => props.type.includes('time'))
-
-    const isTimePicker = computed(() => props.type.startsWith('time'))
-
-    const isDatesPicker = computed(() => props.type === 'dates')
-
-    const triggerIcon = computed(
-      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)
-    )
-
-    const showClose = ref(false)
-
-    const onClearIconClick = (event: MouseEvent) => {
-      if (props.readonly || pickerDisabled.value) return
-      if (showClose.value) {
-        event.stopPropagation()
-        focusOnInputBox()
-        emitInput(null)
-        emitChange(null, true)
-        showClose.value = false
-        pickerVisible.value = false
-        pickerOptions.value.handleClear && pickerOptions.value.handleClear()
-      }
-    }
-    const valueIsEmpty = computed(() => {
-      return (
-        !props.modelValue ||
-        (Array.isArray(props.modelValue) && !props.modelValue.length)
+  } else {
+    valueOnOpen.value = props.modelValue
+  }
+})
+const emitChange = (
+  val: TimePickerDefaultProps['modelValue'] | null,
+  isClear?: boolean
+) => {
+  // determine user real change only
+  if (isClear || !valueEquals(val, valueOnOpen.value)) {
+    emit('change', val)
+    props.validateEvent &&
+      elFormItem.validate?.('change').catch((err) => debugWarn(err))
+  }
+}
+const emitInput = (input: SingleOrRange<DateModelType | Dayjs> | null) => {
+  if (!valueEquals(props.modelValue, input)) {
+    let formatted
+    if (isArray(input)) {
+      formatted = input.map((item) =>
+        formatter(item, props.valueFormat, lang.value)
       )
-    })
-    const onMouseDownInput = async (event: MouseEvent) => {
-      if (
-        (event.target as HTMLElement)?.tagName !== 'INPUT' ||
-        refInput.value.includes(document.activeElement as HTMLInputElement)
-      ) {
-        pickerVisible.value = true
-      }
+    } else if (input) {
+      formatted = formatter(input, props.valueFormat, lang.value)
     }
-    const onMouseEnter = () => {
-      if (props.readonly || pickerDisabled.value) return
-      if (!valueIsEmpty.value && props.clearable) {
-        showClose.value = true
-      }
-    }
-    const onMouseLeave = () => {
-      showClose.value = false
-    }
-    const onTouchStartInput = (event: TouchEvent) => {
-      if (
-        (event.touches[0].target as HTMLElement)?.tagName !== 'INPUT' ||
-        refInput.value.includes(document.activeElement as HTMLInputElement)
-      ) {
-        pickerVisible.value = true
-      }
-    }
-    const isRangeInput = computed(() => {
-      return props.type.includes('range')
-    })
+    emit('update:modelValue', input ? formatted : input, lang.value)
+  }
+}
+const emitKeydown = (e: KeyboardEvent) => {
+  emit('keydown', e)
+}
 
-    const pickerSize = useSize()
+const refInput = computed<HTMLInputElement[]>(() => {
+  if (inputRef.value) {
+    const _r = isRangeInput.value
+      ? inputRef.value
+      : (inputRef.value as any as ComponentPublicInstance).$el
+    return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))
+  }
+  return []
+})
+const refStartInput = computed(() => {
+  return refInput?.value[0]
+})
+const refEndInput = computed(() => {
+  return refInput?.value[1]
+})
 
-    const popperPaneRef = computed(() => {
-      return refPopper.value?.popperRef?.contentRef
-    })
+const setSelectionRange = (start: number, end: number, pos?: 'min' | 'max') => {
+  const _inputs = refInput.value
+  if (!_inputs.length) return
+  if (!pos || pos === 'min') {
+    _inputs[0].setSelectionRange(start, end)
+    _inputs[0].focus()
+  } else if (pos === 'max') {
+    _inputs[1].setSelectionRange(start, end)
+    _inputs[1].focus()
+  }
+}
+const focusOnInputBox = () => {
+  focus(true, true)
+  nextTick(() => {
+    ignoreFocusEvent = false
+  })
+}
 
-    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)
-    const actualInputRef = computed(() => {
-      if (unref(isRangeInput)) {
-        return unref(inputRef)
-      }
+const onPick = (date: any = '', visible = false) => {
+  if (!visible) {
+    focusOnInputBox()
+  }
+  pickerVisible.value = visible
+  let result
+  if (isArray(date)) {
+    result = date.map((_) => _.toDate())
+  } else {
+    // clear btn emit null
+    result = date ? date.toDate() : date
+  }
+  userInput.value = null
+  emitInput(result)
+}
 
-      return (unref(inputRef) as ComponentPublicInstance)?.$el
-    })
+const onBeforeShow = () => {
+  pickerActualVisible.value = true
+}
 
-    onClickOutside(actualInputRef, (e: PointerEvent) => {
-      const unrefedPopperEl = unref(popperEl)
-      const inputEl = unref(actualInputRef)
-      if (
-        (unrefedPopperEl &&
-          (e.target === unrefedPopperEl ||
-            e.composedPath().includes(unrefedPopperEl))) ||
-        e.target === inputEl ||
-        e.composedPath().includes(inputEl)
-      )
-        return
-      pickerVisible.value = false
-    })
+const onShow = () => {
+  emit('visible-change', true)
+}
 
-    const userInput = ref(null)
+const onKeydownPopperContent = (event: KeyboardEvent) => {
+  if ((event as KeyboardEvent)?.key === EVENT_CODE.esc) {
+    focus(true, true)
+  }
+}
 
-    const handleChange = () => {
-      if (userInput.value) {
-        const value = parseUserInputToDayjs(displayValue.value)
-        if (value) {
-          if (isValidValue(value)) {
-            emitInput(
-              Array.isArray(value)
-                ? value.map((_) => _.toDate())
-                : value.toDate()
-            )
-            userInput.value = null
-          }
-        }
-      }
-      if (userInput.value === '') {
-        emitInput(null)
-        emitChange(null)
-        userInput.value = null
-      }
-    }
+const onHide = () => {
+  pickerActualVisible.value = false
+  ignoreFocusEvent = false
+  emit('visible-change', false)
+}
 
-    const parseUserInputToDayjs = (value) => {
-      if (!value) return null
-      return pickerOptions.value.parseUserInput(value)
-    }
+const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
+  ignoreFocusEvent = isIgnoreFocusEvent
+  let input = refStartInput.value
+  if (!focusStartInput && isRangeInput.value) {
+    input = refEndInput.value
+  }
+  if (input) {
+    input.focus()
+  }
+}
 
-    const formatDayjsToString = (value) => {
-      if (!value) return null
-      return pickerOptions.value.formatToString(value)
-    }
+const handleFocusInput = (e?: FocusEvent) => {
+  if (
+    props.readonly ||
+    pickerDisabled.value ||
+    pickerVisible.value ||
+    ignoreFocusEvent
+  ) {
+    return
+  }
+  pickerVisible.value = true
+  emit('focus', e)
+}
 
-    const isValidValue = (value) => {
-      return pickerOptions.value.isValidValue(value)
-    }
+let currentHandleBlurDeferCallback: () => Promise<void> | undefined
 
-    const handleKeydownInput = async (event) => {
-      const code = event.code
-      emitKeydown(event)
-      if (code === EVENT_CODE.esc) {
-        if (pickerVisible.value === true) {
-          pickerVisible.value = false
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        return
-      }
-
-      if (code === EVENT_CODE.down) {
-        if (pickerOptions.value.handleFocusPicker) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        if (pickerVisible.value === false) {
-          pickerVisible.value = true
-          await nextTick()
-        }
-        if (pickerOptions.value.handleFocusPicker) {
-          pickerOptions.value.handleFocusPicker()
-          return
-        }
-      }
-
-      if (code === EVENT_CODE.tab) {
-        hasJustTabExitedInput = true
-        return
-      }
-
-      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
+// Check if document.activeElement is inside popper or any input before popper close
+const handleBlurInput = (e?: FocusEvent) => {
+  const handleBlurDefer = async () => {
+    setTimeout(() => {
+      if (currentHandleBlurDeferCallback === handleBlurDefer) {
         if (
-          userInput.value === null ||
-          userInput.value === '' ||
-          isValidValue(parseUserInputToDayjs(displayValue.value))
+          !(
+            refPopper.value?.isFocusInsideContent() && !hasJustTabExitedInput
+          ) &&
+          refInput.value.filter((input) => {
+            return input.contains(document.activeElement)
+          }).length === 0
         ) {
           handleChange()
           pickerVisible.value = false
+          emit('blur', e)
+          props.validateEvent &&
+            elFormItem.validate?.('blur').catch((err) => debugWarn(err))
         }
-        event.stopPropagation()
-        return
+        hasJustTabExitedInput = false
       }
+    }, 0)
+  }
+  currentHandleBlurDeferCallback = handleBlurDefer
+  handleBlurDefer()
+}
 
-      // if user is typing, do not let picker handle key input
-      if (userInput.value) {
-        event.stopPropagation()
-        return
-      }
-      if (pickerOptions.value.handleKeydownInput) {
-        pickerOptions.value.handleKeydownInput(event)
+const pickerDisabled = computed(() => {
+  return props.disabled || elForm.disabled
+})
+
+const parsedValue = computed(() => {
+  let dayOrDays: DayOrDays
+  if (valueIsEmpty.value) {
+    if (pickerOptions.value.getDefaultValue) {
+      dayOrDays = pickerOptions.value.getDefaultValue()
+    }
+  } else {
+    if (isArray(props.modelValue)) {
+      dayOrDays = props.modelValue.map((d) =>
+        parseDate(d, props.valueFormat, lang.value)
+      ) as [Dayjs, Dayjs]
+    } else {
+      dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value)!
+    }
+  }
+
+  if (pickerOptions.value.getRangeAvailableTime) {
+    const availableResult = pickerOptions.value.getRangeAvailableTime(
+      dayOrDays!
+    )
+    if (!isEqual(availableResult, dayOrDays!)) {
+      dayOrDays = availableResult
+      emitInput(
+        (isArray(dayOrDays)
+          ? dayOrDays.map((_) => _.toDate())
+          : dayOrDays.toDate()) as SingleOrRange<Date>
+      )
+    }
+  }
+  if (isArray(dayOrDays!) && dayOrDays.some((day) => !day)) {
+    dayOrDays = [] as unknown as DayOrDays
+  }
+  return dayOrDays!
+})
+
+const displayValue = computed<UserInput>(() => {
+  if (!pickerOptions.value.panelReady) return ''
+  const formattedValue = formatDayjsToString(parsedValue.value)
+  if (isArray(userInput.value)) {
+    return [
+      userInput.value[0] || (formattedValue && formattedValue[0]) || '',
+      userInput.value[1] || (formattedValue && formattedValue[1]) || '',
+    ]
+  } else if (userInput.value !== null) {
+    return userInput.value
+  }
+  if (!isTimePicker.value && valueIsEmpty.value) return ''
+  if (!pickerVisible.value && valueIsEmpty.value) return ''
+  if (formattedValue) {
+    return isDatesPicker.value
+      ? (formattedValue as Array<string>).join(', ')
+      : formattedValue
+  }
+  return ''
+})
+
+const isTimeLikePicker = computed(() => props.type.includes('time'))
+
+const isTimePicker = computed(() => props.type.startsWith('time'))
+
+const isDatesPicker = computed(() => props.type === 'dates')
+
+const triggerIcon = computed(
+  () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)
+)
+
+const showClose = ref(false)
+
+const onClearIconClick = (event: MouseEvent) => {
+  if (props.readonly || pickerDisabled.value) return
+  if (showClose.value) {
+    event.stopPropagation()
+    focusOnInputBox()
+    emitInput(null)
+    emitChange(null, true)
+    showClose.value = false
+    pickerVisible.value = false
+    pickerOptions.value.handleClear && pickerOptions.value.handleClear()
+  }
+}
+const valueIsEmpty = computed(() => {
+  return (
+    !props.modelValue || (isArray(props.modelValue) && !props.modelValue.length)
+  )
+})
+const onMouseDownInput = async (event: MouseEvent) => {
+  if (
+    (event.target as HTMLElement)?.tagName !== 'INPUT' ||
+    refInput.value.includes(document.activeElement as HTMLInputElement)
+  ) {
+    pickerVisible.value = true
+  }
+}
+const onMouseEnter = () => {
+  if (props.readonly || pickerDisabled.value) return
+  if (!valueIsEmpty.value && props.clearable) {
+    showClose.value = true
+  }
+}
+const onMouseLeave = () => {
+  showClose.value = false
+}
+const onTouchStartInput = (event: TouchEvent) => {
+  if (
+    (event.touches[0].target as HTMLElement)?.tagName !== 'INPUT' ||
+    refInput.value.includes(document.activeElement as HTMLInputElement)
+  ) {
+    pickerVisible.value = true
+  }
+}
+const isRangeInput = computed(() => {
+  return props.type.includes('range')
+})
+
+const pickerSize = useSize()
+
+const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)
+const actualInputRef = computed(() => {
+  if (unref(isRangeInput)) {
+    return unref(inputRef)
+  }
+
+  return (unref(inputRef) as ComponentPublicInstance)?.$el
+})
+
+onClickOutside(actualInputRef, (e: PointerEvent) => {
+  const unrefedPopperEl = unref(popperEl)
+  const inputEl = unref(actualInputRef)
+  if (
+    (unrefedPopperEl &&
+      (e.target === unrefedPopperEl ||
+        e.composedPath().includes(unrefedPopperEl))) ||
+    e.target === inputEl ||
+    e.composedPath().includes(inputEl)
+  )
+    return
+  pickerVisible.value = false
+})
+
+const userInput = ref<UserInput>(null)
+
+const handleChange = () => {
+  if (userInput.value) {
+    const value = parseUserInputToDayjs(displayValue.value)
+    if (value) {
+      if (isValidValue(value)) {
+        emitInput(
+          (isArray(value)
+            ? value.map((_) => _.toDate())
+            : value.toDate()) as DateOrDates
+        )
+        userInput.value = null
       }
     }
-    const onUserInput = (e) => {
-      userInput.value = e
-      // Temporary fix when the picker is dismissed and the input box
-      // is focused, just mimic the behavior of antdesign.
-      if (!pickerVisible.value) {
-        pickerVisible.value = true
-      }
+  }
+  if (userInput.value === '') {
+    emitInput(null)
+    emitChange(null)
+    userInput.value = null
+  }
+}
+
+const parseUserInputToDayjs = (value: UserInput) => {
+  if (!value) return null
+  return pickerOptions.value.parseUserInput!(value)
+}
+
+const formatDayjsToString = (value: DayOrDays) => {
+  if (!value) return null
+  return pickerOptions.value.formatToString!(value)
+}
+
+const isValidValue = (value: DayOrDays) => {
+  return pickerOptions.value.isValidValue!(value)
+}
+
+const handleKeydownInput = async (event: KeyboardEvent) => {
+  const { code } = event
+  emitKeydown(event)
+  if (code === EVENT_CODE.esc) {
+    if (pickerVisible.value === true) {
+      pickerVisible.value = false
+      event.preventDefault()
+      event.stopPropagation()
     }
+    return
+  }
 
-    const handleStartInput = (event) => {
-      if (userInput.value) {
-        userInput.value = [event.target.value, userInput.value[1]]
-      } else {
-        userInput.value = [event.target.value, null]
-      }
+  if (code === EVENT_CODE.down) {
+    if (pickerOptions.value.handleFocusPicker) {
+      event.preventDefault()
+      event.stopPropagation()
     }
-
-    const handleEndInput = (event) => {
-      if (userInput.value) {
-        userInput.value = [userInput.value[0], event.target.value]
-      } else {
-        userInput.value = [null, event.target.value]
-      }
+    if (pickerVisible.value === false) {
+      pickerVisible.value = true
+      await nextTick()
     }
-
-    const handleStartChange = () => {
-      const value = parseUserInputToDayjs(userInput.value && userInput.value[0])
-      if (value && value.isValid()) {
-        userInput.value = [formatDayjsToString(value), displayValue.value[1]]
-        const newValue = [value, parsedValue.value && parsedValue.value[1]]
-        if (isValidValue(newValue)) {
-          emitInput(newValue)
-          userInput.value = null
-        }
-      }
+    if (pickerOptions.value.handleFocusPicker) {
+      pickerOptions.value.handleFocusPicker()
+      return
     }
+  }
 
-    const handleEndChange = () => {
-      const value = parseUserInputToDayjs(userInput.value && userInput.value[1])
-      if (value && value.isValid()) {
-        userInput.value = [displayValue.value[0], formatDayjsToString(value)]
-        const newValue = [parsedValue.value && parsedValue.value[0], value]
-        if (isValidValue(newValue)) {
-          emitInput(newValue)
-          userInput.value = null
-        }
-      }
+  if (code === EVENT_CODE.tab) {
+    hasJustTabExitedInput = true
+    return
+  }
+
+  if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
+    if (
+      userInput.value === null ||
+      userInput.value === '' ||
+      isValidValue(parseUserInputToDayjs(displayValue.value) as DayOrDays)
+    ) {
+      handleChange()
+      pickerVisible.value = false
     }
+    event.stopPropagation()
+    return
+  }
 
-    const pickerOptions = ref<Partial<PickerOptions>>({})
-    const onSetPickerOption = <T extends keyof PickerOptions>(
-      e: [T, PickerOptions[T]]
-    ) => {
-      pickerOptions.value[e[0]] = e[1]
-      pickerOptions.value.panelReady = true
+  // if user is typing, do not let picker handle key input
+  if (userInput.value) {
+    event.stopPropagation()
+    return
+  }
+  if (pickerOptions.value.handleKeydownInput) {
+    pickerOptions.value.handleKeydownInput(event)
+  }
+}
+const onUserInput = (e: string) => {
+  userInput.value = e
+  // Temporary fix when the picker is dismissed and the input box
+  // is focused, just mimic the behavior of antdesign.
+  if (!pickerVisible.value) {
+    pickerVisible.value = true
+  }
+}
+
+const handleStartInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (userInput.value) {
+    userInput.value = [target.value, userInput.value[1]]
+  } else {
+    userInput.value = [target.value, null]
+  }
+}
+
+const handleEndInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (userInput.value) {
+    userInput.value = [userInput.value[0], target.value]
+  } else {
+    userInput.value = [null, target.value]
+  }
+}
+
+const handleStartChange = () => {
+  const values = userInput.value as string[]
+  const value = parseUserInputToDayjs(values && values[0]) as Dayjs
+  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]
+  if (value && value.isValid()) {
+    userInput.value = [
+      formatDayjsToString(value) as string,
+      displayValue.value?.[1] || null,
+    ]
+    const newValue = [value, parsedVal && (parsedVal[1] || null)] as DayOrDays
+    if (isValidValue(newValue)) {
+      emitInput(newValue)
+      userInput.value = null
     }
+  }
+}
 
-    const onCalendarChange = (e) => {
-      ctx.emit('calendar-change', e)
+const handleEndChange = () => {
+  const values = unref(userInput) as string[]
+  const value = parseUserInputToDayjs(values && values[1]) as Dayjs
+  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]
+  if (value && value.isValid()) {
+    userInput.value = [
+      unref(displayValue)?.[0] || null,
+      formatDayjsToString(value) as string,
+    ]
+    const newValue = [parsedVal && parsedVal[0], value] as DayOrDays
+    if (isValidValue(newValue)) {
+      emitInput(newValue)
+      userInput.value = null
     }
+  }
+}
 
-    const onPanelChange = (value, mode, view) => {
-      ctx.emit('panel-change', value, mode, view)
-    }
+const pickerOptions = ref<Partial<PickerOptions>>({})
+const onSetPickerOption = <T extends keyof PickerOptions>(
+  e: [T, PickerOptions[T]]
+) => {
+  pickerOptions.value[e[0]] = e[1]
+  pickerOptions.value.panelReady = true
+}
 
-    provide('EP_PICKER_BASE', {
-      props,
-    })
+const onCalendarChange = (e: [Date, false | Date]) => {
+  emit('calendar-change', e)
+}
 
-    return {
-      nsDate,
-      nsInput,
-      nsRange,
-      // injected popper options
-      elPopperOptions,
+const onPanelChange = (
+  value: [Dayjs, Dayjs],
+  mode: 'month' | 'year',
+  view: unknown
+) => {
+  emit('panel-change', value, mode, view)
+}
 
-      isDatesPicker,
-      handleEndChange,
-      handleStartChange,
-      handleStartInput,
-      handleEndInput,
-      onUserInput,
-      handleChange,
-      handleKeydownInput,
-      popperPaneRef,
-      onClickOutside,
-      pickerSize,
-      isRangeInput,
-      onMouseDownInput,
-      onMouseLeave,
-      onMouseEnter,
-      onTouchStartInput,
-      onClearIconClick,
-      showClose,
-      triggerIcon,
-      onPick,
-      handleFocusInput,
-      handleBlurInput,
-      pickerVisible,
-      pickerActualVisible,
-      displayValue,
-      parsedValue,
-      setSelectionRange,
-      refPopper,
-      inputRef,
-      pickerDisabled,
-      onSetPickerOption,
-      onCalendarChange,
-      onPanelChange,
-      focus,
-      onShow,
-      onBeforeShow,
-      onHide,
-      onKeydownPopperContent,
-    }
-  },
+provide('EP_PICKER_BASE', {
+  props,
+})
+
+defineExpose({
+  /**
+   * @description focus input box.
+   */
+  focus,
+  /**
+   * @description emit focus event
+   */
+  handleFocusInput,
+  /**
+   * @description emit blur event
+   */
+  handleBlurInput,
+  /**
+   * @description pick item manually
+   */
+  onPick,
 })
 </script>
diff --git a/packages/components/time-picker/src/common/props.ts b/packages/components/time-picker/src/common/props.ts
index e80c72d4e0..0500f926b7 100644
--- a/packages/components/time-picker/src/common/props.ts
+++ b/packages/components/time-picker/src/common/props.ts
@@ -1,28 +1,32 @@
-import { isValidComponentSize } from '@element-plus/utils'
+import { buildProps, definePropType } from '@element-plus/utils'
+import { useSizeProp } from '@element-plus/hooks'
 import { CircleClose } from '@element-plus/icons-vue'
 
-import type { Component, PropType } from 'vue'
+import type { Component, ExtractPropTypes } from 'vue'
 import type { Options } from '@popperjs/core'
-import type { ComponentSize } from '@element-plus/constants'
+import type { Dayjs } from 'dayjs'
 
-export const timePickerDefaultProps = {
+export type SingleOrRange<T> = T | [T, T]
+export type DateModelType = number | string | Date
+export type ModelValueType = SingleOrRange<DateModelType>
+export type DayOrDays = SingleOrRange<Dayjs>
+export type DateOrDates = SingleOrRange<Date>
+export type UserInput = SingleOrRange<string | null>
+
+export const timePickerDefaultProps = buildProps({
   id: {
-    type: [Array, String],
+    type: definePropType<SingleOrRange<string>>([Array, String]),
   },
   name: {
-    type: [Array, String],
+    type: definePropType<SingleOrRange<string>>([Array, String]),
     default: '',
   },
   popperClass: {
     type: String,
     default: '',
   },
-  format: {
-    type: String,
-  },
-  valueFormat: {
-    type: String as PropType<string>,
-  },
+  format: String,
+  valueFormat: String,
   type: {
     type: String,
     default: '',
@@ -32,7 +36,7 @@ export const timePickerDefaultProps = {
     default: true,
   },
   clearIcon: {
-    type: [String, Object] as PropType<string | Component>,
+    type: definePropType<string | Component>([String, Object]),
     default: CircleClose,
   },
   editable: {
@@ -40,13 +44,10 @@ export const timePickerDefaultProps = {
     default: true,
   },
   prefixIcon: {
-    type: [String, Object] as PropType<string | Component>,
+    type: definePropType<string | Component>([String, Object]),
     default: '',
   },
-  size: {
-    type: String as PropType<ComponentSize>,
-    validator: isValidComponentSize,
-  },
+  size: useSizeProp,
   readonly: {
     type: Boolean,
     default: false,
@@ -60,13 +61,11 @@ export const timePickerDefaultProps = {
     default: '',
   },
   popperOptions: {
-    type: Object as PropType<Partial<Options>>,
+    type: definePropType<Partial<Options>>(Object),
     default: () => ({}),
   },
   modelValue: {
-    type: [Date, Array, String, Number] as PropType<
-      number | string | Date | (number | string | Date)[]
-    >,
+    type: definePropType<ModelValueType>([Date, Array, String, Number]),
     default: '',
   },
   rangeSeparator: {
@@ -76,10 +75,10 @@ export const timePickerDefaultProps = {
   startPlaceholder: String,
   endPlaceholder: String,
   defaultValue: {
-    type: [Date, Array] as PropType<Date | Date[]>,
+    type: definePropType<SingleOrRange<Date>>([Date, Array]),
   },
   defaultTime: {
-    type: [Date, Array] as PropType<Date | Date[]>,
+    type: definePropType<SingleOrRange<Date>>([Date, Array]),
   },
   isRange: {
     type: Boolean,
@@ -113,7 +112,7 @@ export const timePickerDefaultProps = {
     default: undefined,
   },
   tabindex: {
-    type: [String, Number],
+    type: definePropType<string | number>([String, Number]),
     default: 0,
   },
   validateEvent: {
@@ -121,4 +120,20 @@ export const timePickerDefaultProps = {
     default: true,
   },
   unlinkPanels: Boolean,
+} as const)
+
+export type TimePickerDefaultProps = ExtractPropTypes<
+  typeof timePickerDefaultProps
+>
+
+export interface PickerOptions {
+  isValidValue: (date: DayOrDays) => boolean
+  handleKeydownInput: (event: KeyboardEvent) => void
+  parseUserInput: (value: UserInput) => DayOrDays
+  formatToString: (value: DayOrDays) => UserInput
+  getRangeAvailableTime: (date: DayOrDays) => DayOrDays
+  getDefaultValue: () => DayOrDays
+  panelReady: boolean
+  handleClear: () => void
+  handleFocusPicker?: () => void
 }
diff --git a/packages/components/time-picker/src/time-picker-com/panel-time-range.vue b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
index 2bf03cff3a..dd2e109a1e 100644
--- a/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
+++ b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
@@ -258,7 +258,7 @@ const getRangeAvailableTime = ([start, end]: Array<Dayjs>) => {
   return [
     getAvailableTime(start, 'start', true, end),
     getAvailableTime(end, 'end', false, start),
-  ]
+  ] as const
 }
 
 const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =
diff --git a/packages/components/time-picker/src/time-picker.ts b/packages/components/time-picker/src/time-picker.ts
deleted file mode 100644
index 57956a3d62..0000000000
--- a/packages/components/time-picker/src/time-picker.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { defineComponent, h, provide, ref } from 'vue'
-import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat.js'
-import { DEFAULT_FORMATS_TIME } from './common/constant'
-import Picker from './common/picker.vue'
-import TimePickPanel from './time-picker-com/panel-time-pick.vue'
-import TimeRangePanel from './time-picker-com/panel-time-range.vue'
-import { timePickerDefaultProps } from './common/props'
-dayjs.extend(customParseFormat)
-
-export default defineComponent({
-  name: 'ElTimePicker',
-  install: null,
-  props: {
-    ...timePickerDefaultProps,
-    isRange: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  setup(props, ctx) {
-    const commonPicker = ref(null)
-    const type = props.isRange ? 'timerange' : 'time'
-    const panel = props.isRange ? TimeRangePanel : TimePickPanel
-    const refProps = {
-      ...props,
-      focus: () => {
-        commonPicker.value?.handleFocusInput()
-      },
-      blur: () => {
-        commonPicker.value?.handleBlurInput()
-      },
-    }
-    provide('ElPopperOptions', props.popperOptions)
-    ctx.expose(refProps)
-    return () => {
-      const format = props.format ?? DEFAULT_FORMATS_TIME
-      return h(
-        Picker,
-        {
-          ...props, // allow format to be overwrite
-          format,
-          type,
-          ref: commonPicker,
-          'onUpdate:modelValue': (value) =>
-            ctx.emit('update:modelValue', value),
-        },
-        {
-          default: (scopedProps) => h(panel, scopedProps),
-        }
-      )
-    }
-  },
-})
diff --git a/packages/components/time-picker/src/time-picker.tsx b/packages/components/time-picker/src/time-picker.tsx
new file mode 100644
index 0000000000..6b49817ca6
--- /dev/null
+++ b/packages/components/time-picker/src/time-picker.tsx
@@ -0,0 +1,63 @@
+import { defineComponent, provide, ref } from 'vue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+import { DEFAULT_FORMATS_TIME } from './common/constant'
+import Picker from './common/picker.vue'
+import TimePickPanel from './time-picker-com/panel-time-pick.vue'
+import TimeRangePanel from './time-picker-com/panel-time-range.vue'
+import { timePickerDefaultProps } from './common/props'
+dayjs.extend(customParseFormat)
+
+export default defineComponent({
+  name: 'ElTimePicker',
+  install: null,
+  props: {
+    ...timePickerDefaultProps,
+    isRange: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, ctx) {
+    const commonPicker = ref<InstanceType<typeof Picker>>()
+    const [type, Panel] = props.isRange
+      ? ['timerange', TimeRangePanel]
+      : ['time', TimePickPanel]
+
+    const modelUpdater = (value: any) => ctx.emit('update:modelValue', value)
+    provide('ElPopperOptions', props.popperOptions)
+    ctx.expose({
+      /**
+       * @description focus on the input element
+       */
+      focus: (e: FocusEvent | undefined) => {
+        commonPicker.value?.handleFocusInput(e)
+      },
+      /**
+       * @description blur from the input element
+       */
+      blur: (e: FocusEvent | undefined) => {
+        commonPicker.value?.handleBlurInput(e)
+      },
+    })
+
+    return () => {
+      const format = props.format ?? DEFAULT_FORMATS_TIME
+
+      return (
+        <Picker
+          {...props}
+          ref={commonPicker}
+          type={type}
+          format={format}
+          onUpdate:modelValue={modelUpdater}
+        >
+          {{
+            default: (props: any) => <Panel {...props} />,
+          }}
+        </Picker>
+      )
+    }
+  },
+})