需求:手动输入20240524,饿了么日期组件可识别为2024-05-24
<el-form-item label="开始时间" prop="beginTime">
<!-- :picker-options="pickerOptions" -->
<el-date-picker
v-model="formData.beginTime"
v-elDateFormat
editable
value-format="yyyyMMdd"
type="date"
placeholder="请选择日期"
clearable
style="width: 180px"
/>
</el-form-item>
el-date-picker满足手动输入,只需要editable这个属性就可以了,v-elDateFormat自定义指令就是去处理日期格式的。
// 自定义指令
directives: {
elDateFormat: {
inserted: function(el, binding, vnode) {
const { value: _obj } = binding
const { context: that, data } = vnode
const { expression: key } = data.model
if (that && that._isVue) {
const $this = el.children[0]
$this.onchange = function() {
let value = $this.value // 中文日期
console.log(value)
if (value.match(/\d{1,}/g) && value.length == 8) {
value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式
const time = value && value.constructor == String ? new Date(value) : value // 转换时间格式
let keys = key.split('.') // 自定义赋值
if (_obj) {
const { keys: keyList } = _obj
keys = keyList
}
if (keys && keys.length >= 2) {
const [key1, key2, key3, key4] = keys
if (key4) {
that[key1][key2][key3][key4] = time
} else if (key3) {
that[key1][key2][key3] = time
} else {
that[key1][key2] = time
}
} else {
that[key] = time
}
}
}
}
}
}
},