element-ui日期时间选择框picker-options如何禁用时间范围

如何在日期时间选框中禁止选择一定的时间范围

首先看一下官方文档中 picker-options 相关的介绍

红圈中 disabledDate 方法就是禁用规定日期的配置项，该方法参数为当前所有的日期，方法使用如下

/* 日期时间组件 */
<el-date-picker
	value-format="yyyy-MM-dd"
	:picker-options="pickeroptions"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期">
</el-date-picker>

/* picker-options 配置，该属性中的方法个人习惯在data中配置 */
data () {
	return {
		pickeroptions: {
			disabledDate : time => {
				console.log(time) // 打印结果如下，time打印结果为日期组件中的所有时间
			}
		}
	}
}

如图，打印结果是所有的时间

而官方文档说明返回结果为boolean
所以尝试结果：

disabledDate : time => {
	return time.getTime() > Date.now() // 返回 所有时间 大于 当前时间
}

效果如图

博客书写日期为 2019年12月3日，所以当天时间为3号之后
结果是所有的大于当前时间的日期被禁用

再试一下，返回所有小于当前时间

disabledDate : time => {
	return time.getTime() < Date.now() // 返回所有时间小于当前时间的值
}

效果如图

博客书写日期为 2019年12月3日，所以当天时间为3号之后
结果理所当然，是所有的小于当前时间的日期被禁用

所以 disabledDate 禁用需要禁用的日期时，只要在disabledDate的参数中将需要禁用的时间return返回，该时间就会被禁用
贴一个现在项目中的需求

1. 禁用所有当天之后的日期
2. 选中一个日期，禁用选中日期左右范围区间7天外的日期

代码如下，使用了 onPick 方法，参数为选中的日期区间 （maxDate表示大的日期, minDate表示小的日期）

data () {
	return {
		min ：'', // 选中时间段后，靠前的时间
		pickeroptions: {
			onPick : ({ maxDate, minDate }) => {
					/*
					* 当点击第一个时间时，参数中只有minDate表示选中时间，maxDate为null
					* 当选中日期区间后，minDate 表示左区间的日期，maxDate 表示右区间的日期
					*/
					this.min = minDate && minDate.getTime() // 将第一个选中的日期赋值给 this.min
					// 如果选择了时间段，则清空 this.min
					if(maxDate){
						this.min = ''
					}
				}
			},
			disabledDate : time => {
				let seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
				// 如果开始日期已选中，则返回需求中需要禁用的时间
				if (this.min !== '') {
					// 大于选中时间后七天 || 小于选中时间后七天 || 大于今天 的所有日期都禁用
					return time.getTime() > (this.min + seven) || time.getTime() < (this.min - seven) || time.getTime() > Date.now()
				}else{
					// 什么都没选，只禁用大于今天的所有日期
					return time.getTime() > Date.now()
				}
			}
		}
	}
}

效果如图

博客书写日期为 2019年12月3日，所以当天时间为3号之后
　
什么都没选中时，今天之后的日期被禁用

选中一个日期时，今天之后的日期和选中日期左右区间 7 天外的日期都被禁用

禁用方法就这么多啦，其他的需求只要按照本帖代码修改部分配置，就能实现了