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;
	            }
	          },
	      },
	}
)
相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器