Element日期选择器限制选择的天数（最多多少天）

最新推荐文章于 2023-10-09 16:20:20 发布

BelieveTom、

最新推荐文章于 2023-10-09 16:20:20 发布

阅读量380

点赞数

分类专栏： Element 文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/m0_52510500/article/details/131130629

版权

Element 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js中使用ElementUI的el-date-picker组件来创建一个日期范围选择器，并设置时间限制。通过onPick和disabledDate事件，动态地禁用超过特定时间范围的日期，确保用户只能选择限定内的日期。

摘要由CSDN通过智能技术生成

直接上代码

<el-date-picker
	ref="datePicker"
	v-model="curDate"
	type="daterange"
	range-separator="筛选日期"
	start-placeholder=""
	end-placeholder=""
	value-format="yyyy-MM-dd"
	@change="changeDate"
	:picker-options="pickerOptions"
>
</el-date-picker>

limitDay: 14 * 24 * 3600 * 1000 按照需求自行修改时间

pickerOptions: {
	onPick: ({ minDate }) => {
		if (minDate && this.pickerMinDate) {
			this.pickerMinDate = null;
		} else if (minDate) {
			this.pickerMinDate = minDate.getTime();
		}
	},
	disabledDate: (time) => {
		if (this.pickerMinDate) {
			return (
				time.getTime() > this.pickerMinDate + this.limitDay ||
				time.getTime() < this.pickerMinDate - this.limitDay
			);
		}
		return false;
	},
}