el-date-picker如何根据选择的第一个时间设置可选范围

最新推荐文章于 2024-01-19 14:23:59 发布

大宁宁吖

最新推荐文章于 2024-01-19 14:23:59 发布

阅读量711

点赞数 4

分类专栏： element vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_44594219/article/details/126638708

版权

vue 同时被 2 个专栏收录

19 篇文章 3 订阅

订阅专栏

element

3 篇文章 0 订阅

订阅专栏

根据选择的第一个时间设置可选范围，假设设置可选范围为7天。

如下图：选择的第一个时间为2022.08.15，则选择的第二个时间只能在2022.08.08——2022.08.15或者2022.08.15——2022.08.22中去选择。

代码如下：

<template>
	<div>
		<el-date-picker size="small" v-model="dataRange" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataRange: '',
				pickerOneDate: '',
				pickerOptions: {
					// 获取选择的第一个时间
					onPick: (obj) => {
						this.pickerOneDate = new Date(obj.minDate).getTime();
					},
					disabledDate: (time) => {
						//选择了第一个时间的情况下根据第一个时间设置可选范围
						//未选择第一个时间的情况下可选范围只能选择过去的时间
						if (this.pickerOneDate) {
							const day = 7 * 24 * 3600 * 1000
							let maxTime = this.pickerOneDate + day
							let minTime = this.pickerOneDate - day
							return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() > Date.now()
						} else {
							return time.getTime() > Date.now()
						}
					}
				}
			}
		},
	}
</script>