el-date-picker 实现禁止选择今日以后的日期，以及时间跨度不超过365天，和设置默认选择日期，解决选择当天无效问题

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

后台管理系统中经常会有那种选择起始日期结束日期的情况，如果后台不加限制，那么前端可以传起始时间大于结束时间的情况，这对于整个项目来说算是很大的bug，现在就当是后端不做校验，只谈前端如何将时间限制为禁止选择今日以后的日期，以及时间跨度不超过365天，和设置默认选择日期 首先el-date-picker有 :picker-options属性，绑定属性 :picker-options=“pickerOptions”

<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" end-placeholder="结束日期" :picker-options="pickerOptions">

然后在data中设置需要的数据

data(){
	let secondOfDay = 1000*60*60*24;
	let _minDate = 0;
	return {
		pickerOptions: {
			disabledDate(date) {
				//判断选择了一个日期之后,限定时间跨度为365天
				if (_minDate>0) {
					return date.getTime() > _minDate + 365*secondDay || date.getTime() < _minDate - 365*secondDay || date.getTime() > date.now
				} 
				// 未选择时，单独处理禁止选择当天以后的数据
				else {
					date.getTime() > date.now
				}
			},
			//通过这个方法来监听选择事件
			onPick({ minDate,maxDate }) {
				_minDate = minDate.getTime();
			}
		}
	} 
	
}

ok 上面的实现了，默认时间就更容易了，直接写个方法在mounted调用,本功能实现默认近一周

initDate() {
	let date = new Date();
	let year = date.getFullYear().toString();
	let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
	let day = date.geDate() < 10 ? '0' + date.geDate().toString() : date.geDate().toString();
	let preYear = '';
	let preMonth = '';
	let preDay = '';
	// 日期时7号之前，月份自动-1，如果是1月，那么-1后变成12月，年也-1
	if (date.getDate() < 7) {
		preMonth = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth().toString();
		if (date.getMonth() === 0) {
			preMonth = '12';
			preYear = (date.getFullYear() - 1).toString();
		} else {
			preYear = year;
		}
	} else {
		preMonth = month;
		preYear = year;
		preDay = (date.getDate() - 7) < 10 ? '0' + (date.getDate() - 7).toString() : (date.getDate() - 7).toString();
	}
	let end = year + '-' + month + '-' + day;
	let begin= preYear + '-' + preMonth + '-' + preDay;
	return [begin,end]
}

最后遇到了设置完默认时间，选择当天无效，没法点确定，问题出在组件的default-time属性上，直接去掉，需要时再自己处理即可解决！