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> 
   
   

   實現的效果如下：