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

相关推荐
BillKu13 分钟前
Vue3父子组件数据同步方法
前端·javascript·vue.js
綦枫Maple41 分钟前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
生命猿于运动1 小时前
Trae使用体验
前端·javascript·vue.js
G扇子1 小时前
Vue2与Vue3的双向数据绑定原理与实现对比
前端·vue.js
Dnn011 小时前
修改el-select背景颜色
css·elementui·vue3
樊小肆1 小时前
Vue3 在线 PDF 编辑 2.0 图片批注、批注清空与批注记录功能解析
前端·vue.js·开源
Web漫游1 小时前
🔥2025年了你还不会使用Vue3?
javascript·vue.js
天狗精灵1 小时前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js
前端大白话2 小时前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
fury_1232 小时前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js