每天记录一个小知识-----elementUI日期选择器时间的禁用

picker-options

当前时间日期选择器特有的选项参考下表

disabledDate

设置禁用状态，参数为当前日期，要求返回 Boolean

<template>
  <div>
    <el-date-picker 
        v-model="timeArr" 
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期" 
        end-placeholder="结束日期" 
        :picker-options="DisableDatesOption">
    </el-date-picker>
    <el-date-picker 
        v-model="timeArr1" 
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期" 
        end-placeholder="结束日期" 
        :picker-options="DisableDates">
    </el-date-picker>
  </div>
</template>
<script>
 
export default {
    data() {
        return {
            timeArr:[],
            timeArr1:[],
            DisableDatesOption: {
          disabledDate:(date)=> {
            //禁用当前之前的日期
            return date.getTime() < Date.now()- 8.64e7;
          }
        },
           DisableDates:{
          disabledDate:(date)=> {
            if (this.timeArr) {
                //禁用结束时间之后的日期与当前之前的日期
               return date.getTime() > new Date(this.timeArr[1]).getTime()||date.getTime() < Date.now()- 8.64e7;
            }
           
          }

        }
        };
    },
    methods: {
       
    },
}
</script>
<style scoped>
</style>