标签：picker const end 59 time Date new 选择器

。

涉及到的知识点：获取某一天的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>

。

标签：picker,const,end,59,time,Date,new,选择器
来源： https://www.cnblogs.com/fqh123/p/14456850.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。