Vue2日期选择器插件（vue-datepicker-local）

参考文档： https://github.com/weifeiyue/vue-datepicker-local

支持年份选择器，月份选择器，日期选择器，时间选择器，且均支持范围选择

效果如下演示年月日选择（修改组件相关默认样式，并且只能选择当前时间往前50年之内的日期）

<DatePicker
	v-model="date"
	:local="local"
	placeholder="请选择注册时间"
	format="YYYY-MM-DD"
	:disabled-date="disabledDate"
	clearable />

import DatePicker from 'vue-datepicker-local'
components: {
	DatePicker
},
data () {
	return {
		date: new Date(), // 默认选择当前日期
		local: { // 定制化日期选择的格式内容
			dow: 1, // Monday is the first day of the week
			yearSuffix: '年', // format of head
			monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of head
			months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panel
			weeks: '一_二_三_四_五_六_日'.split('_') // weeks
		},
	}
},
watch: {
	date (to, from) {
		console.log('to:', to)
		if (to === '') {
			this.checkFields('date')
		} else {
			this.checkFocus('date')
		}
	}
},
methods: {
	disabledDate (date) {
		if (date.getTime() > new Date().getTime()) { // 当前日期以后的时间禁用
			return true
		}
		// 当前时间50年前的日期禁用
		if (date.getFullYear() < new Date().getFullYear() - 50) {
			return true
		}
		if (date.getFullYear() === new Date().getFullYear() - 50 && date.getMonth() < new Date().getMonth()) {
			return true
		}
		if (date.getFullYear() === new Date().getFullYear() - 50 && date.getMonth() === new Date().getMonth() && date.getDate() < new Date().getDate()) {
			return true
		}
	}
}
// 重写组件相关样式
.datepicker {
	width: 290px;
	height: 40px;
	line-height: 40px;
	/deep/ input {
		color: #444;
		height: 40px;
		line-height: 40px;
	}
	/deep/ .focus {
		border: 1px solid @mainColor;
	}
	/deep/ .datepicker-popup {
		width: 278px;
		.calendar-head {
			width: 278px;
			.calendar-year-select, .calendar-month-select  {
				font-size: 14px;
				&:hover {
					color: @mainColor;
				}
			}
			.calendar-prev-year-btn, .calendar-prev-month-btn, .calendar-next-year-btn, .calendar-next-month-btn {
				&:hover {
					color: @mainColor;
				}
			}
		}
		.calendar-body {
			width: 278px;
			height: 200px;
			.calendar-date {
				line-height: 100%;
			}
			.calendar-date-selected {
				background: @mainColor;
			}
		}
		.datepicker__buttons {
			.datepicker__button-cancel {
				background: E3E3E3;
			}
			.datepicker__button-select {
				background: @mainColor;
			}
		}
	}
	.calendar-date-selected {
		background: @mainColor;
	}
}