elementUI el-date-picker type=“daterange“ 限制时间选择

青旅半醒 2022-11-25 04:19 675阅读 0赞

需求：  
**1.可选中时间不能超过今天  
2.可选中时间不能超过10年前  
3.时间跨度不能超过6个月**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70 1]

> 特别注意: 如果设置了 default-time 就要注意处理边界情况了 比如：disabledDate 参数 默认是返回 YYYY-MM-DD 00:00:00 ,但是 设置了较大时间的后缀为23:59:59 ，如下方。在 disabledDate 里 参数 返回值为YYYY-MM-DD 23:59:59 这样今天23:59:59之前的时间就无法选中了 所以判断的时候要以今天的23：59：59比较

HTML

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

JS

<script>
    	export default { 
    		data() { 
    			return{ 
    				saleTime: "",
    				minDate: "",
         			maxDate: "",
         			pickerOptions: { 
    		        onPick: ({  maxDate, minDate }) => { 
    		          this.minDate = minDate;//选中的时间较小的一个
    		          this.maxDate = maxDate;//选中的时间较大的一个
    		        },
    		        disabledDate: (time) => { // 设置禁用状态，参数为当前日期，要求返回 Boolean 返回为true禁用
    		          // 当前时间的时间戳
    		          let curDate = new Date().getTime();
    		          // 能查看几年前的时间 单位是年 （当前是10年）
    		          let cutTime = 365 * 10 * 24 * 3600 * 1000;
    		          // 最小时间的时间戳
    		          let minTime = curDate - cutTime;
    		          // 时间跨度 当前是6个月
    		          let month = 30 * 6 * 24 * 3600 * 1000;
    		          // 当前的23点59分59秒
    		          let nowLast = new Date(new Date(new Date().getTime()).setHours(23,59,59,999)).getTime();
    		          if (this.minDate) { 
    		            // 判断
    		            // 1.遍历时间大于今天（23:59:59）会返回true
    		            // 2.遍历时间小于最小时间会返回true
    		            // 3.遍历时间大于 选中的时间较小的一个 加上 时间跨度 会返回true
    		            // 4.遍历时间小于 选中的时间较小的一个 减去 时间跨度 会返回true
    		            return (
    		              time.getTime() > nowLast ||
    		              time.getTime() < minTime ||
    		              time >  new Date(this.minDate.getTime() + month) ||
    		              time < new Date(this.minDate.getTime() - month)
    		            );
    		          }
    		          return time.getTime() > Date.now()  || time.getTime() < minTime;
    		        },
    		      },
    			}
    		},
    		methods:{ 
    			dateChangePicker(e) { 
    		      if (e === null) { 
    		        this.minDate = "";
    		        this.maxDate = "";
    		        this.pickerOptions = { 
    		           disabledDate: (time) => { 
    		          // 返回是否禁用
    		          // 当前时间的时间戳
    		          let curDate = new Date().getTime();
    		          console.log(curDate)
    		          // 能查看几年前的时间 单位是年 （当前是10年）
    		          let cutTime = 365 * 10 * 24 * 3600 * 1000;
    		          // 最小时间的时间戳
    		          let minTime = curDate - cutTime;
    		          // 时间跨度 当前是6个月
    		          let month = 30 * 6 * 24 * 3600 * 1000;
    		          // 当前的23点59分59秒
    		          let nowLast = new Date(new Date(new Date().getTime()).setHours(23,59,59,999)).getTime();
    		          if (this.minDate) { 
    		            // 判断
    		            // 1.遍历时间大于今天（23:59:59）会返回true
    		            // 2.遍历时间小于最小时间会返回true
    		            // 3.遍历时间大于 选中的时间较小的一个 加上 时间跨度 会返回true
    		            // 4.遍历时间小于 选中的时间较小的一个 减去 时间跨度 会返回true
    		            return (
    		              time.getTime() > nowLast ||
    		              time.getTime() < minTime ||
    		              time >  new Date(this.minDate.getTime() + month) ||
    		              time < new Date(this.minDate.getTime() - month)
    		            );
    		          }
    		          return time.getTime() > Date.now()  || time.getTime() < minTime;
    		        },
    		        };
    		      }
    		    },
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70]: /images/20221124/779c2c380a3b438eb3d1d387c20f64ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70 1]: /images/20221124/7b4ec7a006144d748e874a506e781319.png

发表评论取消回复

表情：

评论列表（有 0 条评论，675人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI日期时间选择器

1.只能选择今天和今天以后的时间范围 <el-date-picker 　　v-model="shop.receive_time[0]" 　　type=

分手后的思念是犯贱/ 2024年04月08日 09:29/ 0 赞/ 83 阅读

相关 element 时间选择限制

dom上 <el-form-item label="开始时间" prop="startTime"> <el-date-picker

今天药忘吃喽~/ 2023年05月28日 05:05/ 0 赞/ 1 阅读

相关 elementui日期时间选择限制

参考文章 https://blog.csdn.net/qq\_36747046/article/details/106946325 https://blog.csdn.n

Bertha 。/ 2022年12月22日 15:30/ 0 赞/ 272 阅读

相关 elementui 时间件选择器 zuijinwunian

pickerOptions: \{ disabledDate (time) \{ var startDate = new D

深碍√TFBOYSˉ_/ 2022年12月17日 11:53/ 0 赞/ 248 阅读

相关 elementUI-日期选择器（单个框限制选择范围、快捷键选择）

.el-input { width: 30%; margin-right: 20px; } <div id="page">

刺骨的言语ヽ痛彻心扉/ 2022年11月27日 03:07/ 0 赞/ 667 阅读

相关 elementUI-日期选择器（两个框限制选择范围、快捷键选择）

.el-input { width: 30%; margin-right: 20px; } <div id="page">

快来打我*/ 2022年11月26日 07:52/ 0 赞/ 408 阅读

相关 elementUI el-date-picker type=“daterange“ 限制时间选择

需求： 1.可选中时间不能超过今天 2.可选中时间不能超过10年前 3.时间跨度不能超过6个月 ![在这里插入图片描述][watermark_type_ZmFuZ

青旅半醒/ 2022年11月25日 04:19/ 0 赞/ 676 阅读

相关 element DateTimePicker 日期时间选择器选择范围限制

内容需求：两个DateTimePicker选择日期范围需要做日期范围限制；开始时间必须小于结束时间；结束时间必须大于开始时间；开始时间和结束时间可以选择同一

今天药忘吃喽~/ 2022年08月29日 13:52/ 0 赞/ 1082 阅读

相关任意时间选择（时间段限制）

http://ued.pingan.com/id/demos/datepicker/direction.jsp http://blog.csdn.net/php\_

深碍√TFBOYSˉ_/ 2022年06月12日 06:49/ 0 赞/ 228 阅读

相关 ElementUI DatePicker 日期选择器控制选择时间范围

选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date"

比眉伴天荒/ 2021年12月15日 00:37/ 0 赞/ 761 阅读