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

实现在使用el-date-picker的 type="datetimerange"的情况下 在输入框进行自定义输入内容转换为时间格式

如输入20160123120000转换为2016-01-12 12:00:00

// 【仅双日历 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')" />