ElementUI日期选择器的时间范围控制

ElementUI日期选择器的时间范围控制

​ elementui提供的日期选择器，开发中遇到了要设置日期的可选范围为今天及以后的时间；

1. 单个日期控制

   ​ vue代码：

   <el-date-picker
          v-model="value"
          type="date"
          placeholder="请选择到期日期"
          :picker-options="pickerOptions">
   </el-date-picker>
   

   限制不能选择今天之前的日期（可以选择今天的日期）

   <script>
   	export default {
   		data (){
     			return {
          			pickerOptions: {
             			disabledDate(time) {
             	 			return time.getTime() < Date.now() - 8.64e7;
             			}
           		},  
     			 }     
   		 }   
    	 }
   </script> 
   
   

   限制不能选择今天之前的日期（不能选择今天的日期）

   <script>
   	export default {
   		data (){
     			return {
          			pickerOptions: {
             			disabledDate(time) {
             	 			return time.getTime() < Date.now() 
             			}
           		},  
     			 }     
   		 }   
    	 }
   </script> 
   
   

2. 两个日期联动控制

   ​ 运用场景：
   1、当天日期为：2021-01-07
   2、elementUI的两个日期选择框：起送时间、送达时间
   限制情况：
   1、起送时间、送达时间都不能选择今天之前的日期（即：2021-01-06之后）
   2、若起运时间选择了2021-01-07,送达时间便不能选择2021-01-07之前的日期（即：2021-01-07之后）
   3、若送达时间选择了2021-01-08,起送时间便不能选择今天之前的日期，且不能选择2021-01-09之后的日期（即：2021-01-07至2021-01-09）

   代码：

   <el-date-picker
          v-model="value"
          type="dateStart"
          placeholder="选择起运日期"
          :picker-options="pickerOptionsStart">
   </el-date-picker>
   <el-date-picker
          v-model="value"
          type="dateEnd"
          placeholder="选择送达日期"
          :picker-options="pickerOptionsEnd">
   </el-date-picker>
   <script>
   	export default {
   		data (){
     			return {
     				dateStart:'', // 起运日期
     				dateEnd:'', // 送达日期
          			pickerOptionsStart: {
             			disabledDate(time) {
             	 			if (this.dateEnd) {
   		            		var endTime = new Date(this.dateEnd).valueOf();
   		            	}
   		            	var startTime =  Date.now() - 8.64e7;
   		            	return time && (time.valueOf() < startTime) || time.valueOf() > endTime 
             			}
           		},  
           		pickerOptionsEnd: {
             			disabledDate(time) {
             	 			if (this.dateStart) {
             	 				// 让用户可以选择开始结束同一天
   							var startTime = new Date(this.dateStart).valueOf() - 8.64e7 + 1; 
   				 		} else {
   				 			var startTime = Date.now() - 8.64e7;
   				 		}
   				 		return time && time.valueOf() < startTime
             			}
           		},
     			 }     
   		 }   
    	 }
   </script> 
   
   

   实现的效果如下：