element Plus 日期选择限制范围

项目：vite + vue3 + element plus

效果图：

比如先选了开始日期，结束日期只能比它大；

选了结束日期，开始时期只能比它小；

网上看了很多，大部分都是element ui组件的使用方法，文章讲的是关于element Plus中的使用方法

上代码：

<el-date-picker
    v-model="formData.start"
    type="date"
    placeholder="生效日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    :disabled-date="disabledDateStart"
/>

<el-date-picker
       v-model="formData.end"
       type="date"
       placeholder="失效日期"
       format="YYYY-MM-DD"
       value-format="YYYY-MM-DD"
       :disabled-date="disabledDateEnd"
 />

JS

首先要安装下dayjs

然后引入

 

import dayjs from "dayjs";

 

 

 

 

// 限制开始时间
const disabledDateStart = (time: any) => {
    const endTime = dayjs(formData.value.end).valueOf()
    const startTime = time.getTime()
    return startTime > endTime
}
// 限制结束时间
const disabledDateEnd = (time: any) => {
    // 时间戳毫秒格式
    const startTime = dayjs(formData.value.start).valueOf()
    const endTime = time.getTime()
    return endTime < startTime
}

 

要安装下dayjs的，用dayjs转为时间戳格式， 函数中的参数time会返回所选日期页的所有日期的毫秒级(13位)时间戳，但通过v-model绑定的值是十位的。所以要转一下，然后再比较

然后返回符合要求的时间戳日期，这样就能达到效果了，无论先选开始，还是结束，都是限制范围

 

 2.表格数据进行限制

 每行有一个规则，每个规则可以设置有效期，时间有重复的就要设置优先级

思路：每次选择完时间后，触发事件，校验时间是否有相同的

import dayjs from "dayjs";
// 使用插件
dayjs.extend(isBetween)

结束日期组件用@change绑定事件

const checkedFormData = () => {
　　// 获取表单中存储表格的数据
    const tableList = formData.value.calculationMethodList;
    if (tableList.length > 1) {
        // 时间是否重复
        for (let i = 0; i < tableList.length - 1; i++) {
            for (let j = i + 1; j < tableList.length; j++) {
　　　　　　　　　　// 若 (第i项的开始时间在第J项的开始时间和结束时间之间 或 第I项的结束时间在第J项开始时间和结束时间之间 ) 
　　　　　　　　　　// 参考dayjs的isBetween使用
                if (dayjs(tableList[i].effectiveDate).isBetween(tableList[j].effectiveDate, tableList[j].expirationDate, null, '[]') || dayjs(tableList[i].expirationDate).isBetween(tableList[j].effectiveDate, tableList[j].expirationDate, null, '[]')) {
                    // 该项的优先级是否可填写
　　　　　　　　　　　　tableList[i].editPriority = false
                    tableList[j].editPriority = false
                    // 如果填写了优先级，就可以提交表单那，发送请求了
　　　　　　　　　　　　if (tableList[i].priority && tableList[j].priority) {
                       submitReq() // 发送请求
                    } else {
                       ElMessage.error(`第${i + 1}条和第${j + 1}条时间有重复,请设置优先级`)
                    }
                }
            }
        }
    }else {
　　　　　// 只有一项，优先级不用填，也不用校验时间
        submitReq()
    }
}