el-date-picker限制选择7天内&禁止内框选择

需求:elementPlus时间段选择框需要满足:①最多选7天时间。②不能手动输入。


html 复制代码
<el-date-picker 
    v-model="timeArrange" 
    @focus="timeEditable" 
    :editable="false" 
    type="datetimerange" 
    range-separator="至" start-placeholder="开始日期" 
    value-format="YYYY-MM-DD HH:mm:ss" 
    :disabled-date="disabledDateFn" 
    @calendar-Change="calendarChange" 
    end-placeholder="结束日期" 
    style="width: 100%" 
/>

①、限制最多选7天时间问题

加属性 :disabled-date="disabledDateFn" 和 @calendar-Change="calendarChange"

javascript 复制代码
const disabledDateFn = (time: any) => {
    // 如何选择了一个日期
    if (choiceDate.value) {
        // 7天的时间戳
        const one = 6 * 24 * 3600 * 1000;
        // 当前日期 - one = 7天之前
        const minTime = choiceDate.value - one;
        // 当前日期 + one = 7天之后
        const maxTime = choiceDate.value + one;
        return (
            time.getTime() < minTime ||
            time.getTime() > maxTime
            // 限制不能选择今天及以后
            // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
        );
    } else {
        // 如果没有选择日期,就要限制不能选择今天及以后
        // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
    }
}

const calendarChange = (obj: any) => {
    const minDate = obj[0]
    const maxDate = obj[1]
    // 把选择的第一个日期赋值给一个变量。
    choiceDate.value = minDate.getTime();
    // 如何你选择了两个日期了,就把那个变量置空
    if (maxDate) choiceDate.value = null;
}

效果如下:


②限制手动输入问题。

这里有内外两个输入框需要限制

外部的可以直接用属性 **:editable="false"**限制

内部的这里需要通过 **@focus="timeEditable"**把 input内框输入都变成只读状态。

javascript 复制代码
//组件禁止组件里面的input输入值
const timeEditable = ()=>{
    nextTick(() => {
        let els = document.querySelectorAll('.el-input__wrapper input');
        for (var i = 0; i <= els.length - 1; i++) {
            els[i].setAttribute('readonly', 'readonly');
        }
    })
}

这样需求就实现了

相关推荐
艾小码5 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀9 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck10 分钟前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
IT技术分享社区12 分钟前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发
林强1814 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐4 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散7 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js