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

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj3 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
萌萌哒草头将军7 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
Zz_waiting.10 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者11 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者11 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042711 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu11 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
鱼钓猫11 小时前
H5 电子签名组件
vue.js·canvas
就是帅我不改13 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端