el-date-picker限制时间选择范围

vue2 + el-date-picker限制时间选择范围

选择规定时间范围内的时间,即点击第一个时间的前后时间范围可选择,其余时间置灰不可选择

官网组件文档:https://element.eleme.cn/#/zh-CN/component/datetime-picker

限制时间选择范围的属性为:picker-options

html代码

javascript 复制代码
<el-date-picker
 	v-model="dateTime"
    type="datetimerange"
    align="right"
    range-separator="- "
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @blur="isRestart = true"
    value-format="yyyy-MM-dd HH:mm:ss"
    :clearable="dateClear"
    style="width:216px;">
</el-date-picker>

js代码

javascript 复制代码
data(
	return{
		// 第一次选择时间---重置时间范围
		  isRestart: false,
	      pickerMinDate: '',
	      pickerOptions: {
		      onPick: ({
		          maxDate,
		          minDate,
		      }) => {
		         this.isRestart = false;
		         this.pickerMinDate = minDate.getTime();
		         if (maxDate) {
		            this.pickerMinDate = "";
		         }
		       },
		
	          disabledDate: (time) => {
	            if (this.pickerMinDate !== "") {
	            	// 时间范围为31天,可根据自身需求更改时间范围
	               const one = 31 * 24 * 3600 * 1000;
	               const minTime = this.pickerMinDate - one;
	               const maxTime = this.pickerMinDate + one;
	               return time.getTime() < minTime || time.getTime() > maxTime;
	            }
	          },
	      },
	}
)
相关推荐
itslife10 分钟前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan32 分钟前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户14567756103733 分钟前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
西洼工作室1 小时前
前端混入与组合实战指南
前端
YQ_ZJH1 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端
报错小能手1 小时前
linux学习笔记(18)进程间通讯——共享内存
linux·服务器·前端
魔云连洲1 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式
JinSo1 小时前
alien-signals 系列 —— 认识下一代响应式框架
前端·javascript·github
开心不就得了1 小时前
Glup 和 Vite
前端·javascript
szial1 小时前
React 快速入门:菜谱应用实战教程
前端·react.js·前端框架