el-date-picker ，自定义输入数字自动转换显示yyyy-mm-dd HH:mm:ss格式 【仅双日历 datetimerange专用】

// 【仅双日历 datetimerange】 专用
export function handleDateTimeInput(
  e: KeyboardEvent,
  formData: Record<string, any>,
  field: string
) {
  // 1. 只允许数字 + 控制键
  const isNumber = /^[0-9]$/.test(e.key)
  const isControl = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)

  if (!isNumber && !isControl) {
    e.preventDefault()
    return
  }
  if (isControl) return

  setTimeout(() => {
    const input = e.target as HTMLInputElement
    if (!input) return

    let val = input.value.replace(/\D/g, '')
    if (val.length < 8) return

    const date = val.slice(0, 8)
    const time = val.slice(8, 14)
    const y = date.slice(0, 4)
    const m = date.slice(4, 6)
    const d = date.slice(6, 8)
    let dateStr = `${y}-${m}-${d}`

    let timeStr = ''
    if (time.length >= 1) timeStr = time.slice(0, 1)
    if (time.length >= 2) timeStr = time.slice(0, 2)
    if (time.length >= 3) timeStr = time.slice(0, 2) + ':' + time.slice(2, 3)
    if (time.length >= 4) timeStr = time.slice(0, 2) + ':' + time.slice(2, 4)
    if (time.length >= 5) timeStr = time.slice(0, 2) + ':' + time.slice(2, 4) + ':' + time.slice(4, 5)
    if (time.length >= 6) timeStr = time.slice(0, 2) + ':' + time.slice(2, 4) + ':' + time.slice(4, 6)

    let final = dateStr
    if (timeStr) final += ' ' + timeStr

    input.value = final
    input.dispatchEvent(new Event('input'))

    if (val.length === 14) {

      const formattedDate = dayjs(final).format('YYYY-MM-DD HH:mm:ss')
      const isStart = input.placeholder.includes('开始')

      if (isStart) {
        formData[field][0] = formattedDate
      } else {
        formData[field][1] = formattedDate
      }

      input.dispatchEvent(new Event('change'))
    }
  }, 0)
}

使用方法：使用@keydown来进行触发

<el-date-picker
v-model="form.effectiveTime"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 360px"
@keydown="handleDateTimeInput($event, form, 'effectiveTime')"
/>