element_ui日期组件限制开始时间,结束时间范围

装载于 https://blog.csdn.net/banzhuanren1/article/details/103950294

说明1：当开始时间有值的时候，结束时间不能早于开始时间
说明2：当结束时间有值的时候，开始时间不能晚于结束时间
<template>
    <div class="pickerDiv">
        <div class="block">
            <el-date-picker
                v-model="startTimeInput"
                type="date"
                :picker-options="pickerStartOptions"
                placeholder="开始日期">
            </el-date-picker>
        </div>
        <div class="block">
            <el-date-picker
                v-model="endTimeInput"
                type="date"
                :picker-options="pickerEndOptions"
                placeholder="结束日期">
            </el-date-picker>
        </div>
    </div>
</template>
<script>
  export default {
     
    props:{
     
      endTime:{
     
        type:String,
        default:''
      },
      startTime:{
     
        type:String,
        default:''
      }
    },
    data() {
     
      return {
     
        startTimeInput:this.startTime,
        endTimeInput:this.endTime,
        pickerStartOptions: {
     
          disabledDate:(time)=> {
     
            if(this.endTimeInput){
     
                return time.getTime() >this.endTimeInput;
            }
          },
        },
        pickerEndOptions: {
     
          disabledDate:(time)=> {
     
            let curDate = (new Date()).getTime();
            let day = 30 * 24 * 3600 * 1000;
            let dateRegion = curDate - day;
            if(this.startTimeInput){
     
                return  time.getTime() < this.startTimeInput;
            }
          },
        },

      };
    },
    methods:{
     
    }
  };
</script>
<style lang="less" scoped>
.pickerDiv{
     
    width: 600px;
    display :flex;
    justify-content :space-around
}
</style>


代码转载于大佬写的 用于做笔记 
//-------------------------------------------------------
下边的这部分有残缺 不好用 先记录一下 
      startTimeOptions: {
     
        //开始时间范围限定
        disabledDate: time => {
     
          if (this.infoFrom.projectApprovalTime) {
     
            return (
              time.getTime() <= Date.now() - 8.64e7 ||
              time.getTime() >= this.infoFrom.plannedClosingTime
            )
          }
          return time.getTime() === Date.now() - 8.64e7
        }
      },
      endTimeOptions: {
     
        //结束时间范围限定
        disabledDate: time => {
     
          return (
            time.getTime() === Date.now() - 8.64e6 ||
            time.getTime() <= this.infoFrom.projectApprovalTime
          )
        }
      },-