el-date-picker分段式时间范围选择器双向校验

最新推荐文章于 2024-07-23 16:48:25 发布

Lccccb

最新推荐文章于 2024-07-23 16:48:25 发布

阅读量400

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Lccccb/article/details/132356227

版权

const rules = {
    startTime: [{ required: true, trigger: 'change', validator: validateStartTime }],
    endTime: [{ required: true, trigger: 'change', validator: validateEndTime }]
}


let startVerifyEnable = true
let endVerifyEnable = true
const validateStartTime = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请选择开始时间'))
    }
    if (!formData.endTime) {
        return callback()
    }
    if (new Date(formData.startTime) > new Date(formData.endTime)) {
        callback(new Error('开始时间不能大于结束时间'))
    }
    if (startVerifyEnable) {
        startVerifyEnable = false
        setTimeout(() => (startVerifyEnable = true), 0)
        formVm.value.validateField('endTime')
    }
}
const validateEndTime = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请选择结束时间'))
    }
    if (!formData.startTime) {
        return callback()
    }
    if (new Date(formData.endTime) < new Date(formData.startTime)) {
        callback(new Error('结束时间不能小于开始时间'))
    }
    if (endVerifyEnable) {
        endVerifyEnable = false
        setTimeout(() => (endVerifyEnable = true), 0)
        formVm.value.validateField('startTime')
    }
}