elementUI el-date-picker 时间范围设置 固定时间段可选 配置

废话不多说  上代码

这是Vue2版本的,Vue3+ElementPlus版本Vue3+ElementPlus el-date-picker 时间范围设置 固定时间段可选 配置_天渺工作室的博客-****博客_vue设置时间段

<el-date-picker
                            v-model="startTimeAndEndTime"
                            @change='pickerTime'
                            type="datetimerange"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="-"
                           :picker-options="pickerOptions"
                            :default-time="['00:00:00','23:59:59']"
                            
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
    </el-date-picker>

官方文档自带的pickerOptions 事件 

...


 data() {
    return {
        
       
        pickerOptions:{
          
           disabledDate: (time) => {
       
          // 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
          return (time);
        }
        },

}
}





methods: {
            dealDisabledDate (time) {
            // time 是一个new Date数据
            
            if(new Date(time).getTime()>new Date().getTime()){
                    return () >= (new Date().getTime()) ;//时间范围必须是时间戳
            }else{
                return () < () - 2*8.64e7;//8.64e7就是一天的时间戳 24*60*60*1000   两天之内 根据自己需求来定
            }
            
            },
}

...

这样思路就比较明确了 只要时间戳大小判断好  就能固定时间选择器里面的可选范围