vue+element日期组件设置选择区域

项目需求

项目需求是：写一个时间选择器，只能选择当月最后一天和下月第一天，如下图：

代码

 <el-date-picker
 	v-model="ruleFormChild.timePoint" 
 	type="datetime"
 	placeholder="选择时间点"
 	value-format="yyyy-MM-dd HH:mm:ss" 
 	@focus="disDate"
 	@change="getLastData"
 	:picker-options="pickerOptions"
 	style="width: 53%;padding-left: 7px">
 </el-date-picker>
 
//时间组件
data(){
	return {
		pickerOptions: {}
	}
}

//限制日期
disDate() {
	// 当前日期
	let now = new Date();
	//本月结束时间
	let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
	let timeEnd = Date.parse(monthEndDate);
	this.pickerOptions.disabledDate = time => (time.getTime() < timeEnd) || (time.getTime() > timeEnd + 60 * 60 * 1000 * 24);
},

利用elementUi 的 el-date-picker标签属性：picker-options

@focus:元素获取焦点时所触发的事件,一般是更新下拉框,每次打开会请求后端方法

value-format="yyyy-MM-dd HH:mm:ss" ：日期格式化

Date() 返回当日的日期和时间
getFullYear()方法返回的年份，返回值是一个四位数，表示包括世纪值在内的完整年份，而不是两位数的缩写形式
getYear() 方法对于介于 1900 与 1999 之间的年份，getYear() 方法仅返回两位数字。对于 1900 之前或 1999 之后的年份，则返回 4 位数字
getMonth() 方法可返回表示月份的数字