element ui el-date-picker日期时间选择器 设置只能选择不大于30天时间范围

需求:要求日期时间选择器只能选择最多32天,其他日期为不可点击状态。

日期组件type为daterange或者datetimerange都生效

实现(vue2.x):

通过属性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"
    :default-time="['00:00:00', '23:59:59']"
    value-format="yyyy-MM-dd HH:mm:ss"
    :clearable="dateClear"
    style="width:216px;">
</el-date-picker>

data

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 !== "") {
	               const one = 32 * 24 * 3600 * 1000;
	               const minTime = this.pickerMinDate - one;
	               const maxTime = this.pickerMinDate + one;
	               return time.getTime() < minTime || time.getTime() > maxTime;
	            }
	          },
	      },
	}
)

效果

参考链接:https://www.jianshu.com/p/2a07de981fab

相关推荐
Bella_a16 分钟前
请描述Vue的生命周期钩子,并在哪个阶段能访问到真实的DOM?
vue.js
小样还想跑37 分钟前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设
_一两风1 小时前
Vue3 常用指令介绍
vue.js
Z_ One Dream1 小时前
React 和 Vue 如何选择?(2026 年)
javascript·vue.js·react.js
Restart-AHTCM1 小时前
前端核心框架vue之(路由核心案例篇3/5)
前端·javascript·vue.js
天蓝色的鱼鱼2 小时前
高效开发之选:六款优秀的Vue3开源后台模板全面解析
前端·vue.js
知识分享小能手8 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang10 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder11 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
子兮曰12 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js