Element el-date-picker datetimerange使用及限制时间范围

最新推荐文章于 2025-05-30 09:06:19 发布

linzhiji

最新推荐文章于 2025-05-30 09:06:19 发布

阅读量2.3w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/linzhiji/article/details/105373318

前端专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何在前端开发中使用Element UI的日期选择器组件，实现初始化时间为明天零点到7天后23:59:59，并设置限制用户无法选择今天之前的日期。通过JavaScript代码详细展示了如何配置和实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
使用场景：
1）初始化时间为明天零点到7天后晚上23:59:59秒
2）不允许选今天之前的日期

<el-date-picker
        v-model="rangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @blur="onTimeChange"
        :picker-options="datePickerOptions">
</el-date-picker>

1）初始化时间

initTime: function () {
    let oneDay = 1000 * 60 * 60 * 24;
    let dateNextZero = new Date(new Date().getTime() + oneDay);
    dateNextZero.setHours(0);
    dateNextZero.setMinutes(0);
    dateNextZero.setSeconds(0);
    let date6Later = new Date(new Date().getTime() + (oneDay * 6));
    date6Later.setHours(23);
    date6Later.setMinutes(59);
    date6Later.setSeconds(59);

    this.startTime = formatDateTime(dateNextZero.getTime());
    this.endTime = formatDateTime(date6Later.getTime());
    this.rangeTime = [this.startTime, this.endTime];
},

2）限制不能选今天之前的
data里

datePickerOptions:{
    disabledDate:(time)=>{
        let nowDate = new Date();
        let oneDay = 1000 * 60 * 60 * 24;
        let oneYearLater = new Date(nowDate.getTime() + (oneDay * 365));
        return time.getTime() < nowDate || time.getTime() > oneYearLater;//注意是||不是&&
    }
},