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;
	            }
	          },
	      },
	}
)
相关推荐
四季豆豆豆7 分钟前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架