element-ui中el-date-picker时间选择器限制选择7天内数据、获取某一天0点或23:59:59

。

涉及到的知识点：获取某一天的0点和23:59:59

废话不多说，上代码：

<template>
    <div>
        <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            :picker-options="pickerOptions"
            :default-time="defaultTime"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="valueFormat"
            :format="format"
            popper-class="cusDatetimer"
            align="right">
        </el-date-picker>
    </div>
</template>

<script>
export default {
    data(){
        return {
            timeValue:[],//绑定时间的值
            defaultTime:['00:00:00', '23:59:59'],//选择日期后的默认时间
            valueFormat:"yyyy-MM-dd HH:mm:ss",//绑定值的格式
            format:"yyyy/MM/dd HH:mm:ss",//日期显示格式
            pickerOptions:{//配置项
                shortcuts: [{//设置快件选项
                        text: "最近7天",
                        onClick: picker => {
                            const end = new Date();
                            const start = this.getBeforeDate(new Date(), 6);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近30天",
                        onClick: picker => {
                            const end = new Date();
                            const start = this.getBeforeDate(new Date(), 30);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近90天",
                        onClick: picker => {
                            const end = new Date();
                            const start = this.getBeforeDate(new Date(), 90);
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ],
                // 监听每一次选择日期的事件
                onPick: ({ maxDate, minDate }) => {//最大时间  最小时间 
                    this.choiceDate = minDate.getTime();//当选一个日期时 就是最小日期
                    // // 如何你选择了两个日期了，就把那个变量置空
                    if (maxDate) this.choiceDate = ''
                },
                // 设置禁用状态  time是日历上的每一个时间
                disabledDate: time => {
                    // 如何选择了一个日期
                    if (this.choiceDate) {
                        // 7天的时间戳
                        const one = 6 * 24 * 3600 * 1000;//这里如果乘以7相当于限制8天以内的  所以乘以6
                        // 当前日期 - one = 7天之前
                        const minTime = this.choiceDate - one;
                        // 当前日期 + one = 7天之后
                        const maxTime = this.choiceDate + one;
                        return (
                            time.getTime() < minTime ||
                            time.getTime() > maxTime ||
                            // 限制不能选择今天及以后
                            time.getTime()  >  this.getDayStartOrEnd(new Date(),"end")
                        )
                    } else {
                        // 如果没有选择日期，就要限制不能选择今天及以后
                        return time.getTime() >  this.getDayStartOrEnd(new Date(),"end");
                    }
                }
            }
        }
    },
    methods:{
        //返回几天前的毫秒数
        getBeforeDate(date = new Date(), days = 7) {
            date.setTime(date.getTime() - 3600 * 1000 * 24 * days);
            return date;
        },
        // 获取当天0点或23:59:59
        getDayStartOrEnd(time,type = "start"){//end  返回毫秒数
            if(type == "start"){
                return new Date(time).setHours(0,0,0,0);//hourse、min、sec、millisec
            }else{
                return new Date(time).setHours(23,59,59,999);
            }
        }
    }

}
</script>

<style lang="scss">
    
</style>

。