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;
	            }
	          },
	      },
	}
)
相关推荐
胡八一16 分钟前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla16 分钟前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡26 分钟前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu44 分钟前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c1 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪1 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆1 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻1 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。2 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴2 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express