前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue结合Element-UI禁止选择当前时间以后的天数,并限制查询天数

Vue结合Element-UI禁止选择当前时间以后的天数,并限制查询天数

作者头像
越陌度阡
发布2020-11-26 14:43:58
1.3K0
发布2020-11-26 14:43:58
举报

1. 添加选择限制 pickerOptions

代码语言:javascript
复制
<el-date-picker
    type="daterange"
    v-model="time_range"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
></el-date-picker>

2. 在data里定义pickerOptions

代码语言:javascript
复制
pickerOptions: {
    // 选择日期时
    onPick: ({ maxDate, minDate }) => {
        // 将开始时间置为选择时间
        this.choiceDate = minDate.getTime();
        // 当选择了结束时间
        if(maxDate){
            // 清除选择时间
            this.choiceDate="";
        };
    },
    disabledDate: time => {
        let self = this;
        // 如果有选择时间,即选择了开始时间后
        if (self.choiceDate) {
            // 开始时间
            let startDay =self.choiceDate;
            // 限制结束时间只能是未来31天
            let endDay = startDay + 24 *3600 *1000 *31;
            // 如果未来31天超过了今天
            if(endDay > (Date.now() - 8.64e6)){
                // 将结束时间置为今天,如果不想包含今天,就减去8.64e7
                endDay = Date.now() - 8.64e6;
            };
            return (
                // 选择开始时间后,返回限制条件
                time.getTime() < startDay || time.getTime() > endDay
            )
        }else{
            return (
                // 默认打开时限制不能选择当前日期以后的天数
                time.getTime() > (Date.now() - 8.64e6)
            )
        }
    }
}

3. 最终效果如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/12/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档