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

张开发
2026/4/16 3:27:14 15 分钟阅读

分享文章

el-date-picker ,自定义输入数字自动转换显示yyyy-mm-dd HH:mm:ss格式 【仅双日历 datetimerange专用】
实现在使用el-date-picker的 typedatetimerange的情况下 在输入框进行自定义输入内容转换为时间格式如输入20160123120000转换为2016-01-12 12:00:00// 【仅双日历 datetimerange】 专用 export function handleDateTimeInput( e: KeyboardEvent, formData: Recordstring, 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-modelform.effectiveTime typedatetimerange formatYYYY-MM-DD HH:mm:ss value-formatYYYY-MM-DD HH:mm:ss range-separator至 start-placeholder开始时间 end-placeholder结束时间 stylewidth: 360px keydownhandleDateTimeInput($event, form, effectiveTime) /

更多文章