【vue+elementui】时间选择器：时间格式、设置时间最大日期或最小日期、设置时间选择范围

时间格式

新版的elementui新增了定义时间格式的属性value-format，这样就不用再自己写js在各种格式间转换。

例：
下面例子在获取startDate时返回的就是’2019-11-06 11:17:13’

时间选择范围

通常如果是有开始时间、结束时间的话，我们就要设置开始时间不能大过结束时间，同理结束时间不能小于开始时间，我们可以通过picker-options属性来设置。

页面

timeFrame.js

export default {
	startDatePicker(date1, date2) {
		return {
			disableDate(time) {
				if (date1 && date2) {
					//时间要控制在一个范围内时
					return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();
				} else {
					if (date1) {
						return new Date(date1).getTime() > time.getTime();
					}
					if (date2) {
						return new Date(date2).getTime < time.getTime();
					}
				}
			}
		}
	},

	endDatePicker(date1, date2) {
		return {
			disableDate(time) {
				if (date1 && date2) {
					//时间要控制在一个范围内时
					return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();
				} else {
					if (date1) {
						return new Date(date1).getTime() > time.getTime();
					}
					if (date2) {
						return new Date(date2).getTime < time.getTime();
					}
				}
			}
		}
	}
}