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;
	            }
	          },
	      },
	}
)
相关推荐
非ban必选9 分钟前
netty-scoket.io路径配置
java·服务器·前端
じòぴé南冸じょうげん44 分钟前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
会豪1 小时前
Electron主进程渲染进程如何优雅的进行通信
前端
jianghaha20111 小时前
前端 Word 模板参入特定数据 并且下载
前端·word
跟橙姐学代码1 小时前
轻松搞定 Python 模块与包导入:新手也能秒懂的入门指南
前端·python·ipython
aiwery1 小时前
大模型场景下的推送技术选型:轮询 vs WebSocket vs SSE
前端·agent
会豪1 小时前
前端插件-不固定高度的DIV如何增加transition
前端
却尘1 小时前
Server Actions 深度剖析(2):缓存管理与重新验证,如何用一行代码干掉整个客户端状态层
前端·客户端·next.js
小菜全1 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku1 小时前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试