解决elementui的DatePicker 日期选择器，带快捷选项（自定义12个月）的方法

## 废话不多说，线上效果图

问题描述：网上找了很久，都找不到elementui的DatePicker 日期选择器可以自定义某年某月的快捷选项，elementui的官网例子都是根据当前月份来做的快捷选项

1、自定义带快捷选项的12个月的方法

<template>
	<div class="kingPickerIndex" style="margin: 300px;">
		<el-date-picker
			:default-value="kingDefaultValue"
			popper-class="kingChangePickPanelPaBo"
			ref="elPicker"
			value-format="yyyy-MM-dd"
			format="yyyy-MM-dd"
			v-model="date"
			align="right"
			type="dates"
			placeholder="选择日期"
			:picker-options="pickerOptions"
		></el-date-picker>
	</div>
</template>

<script>
export default {
	name: 'kingPicker',
	data() {
		return {
			date: null,
			kingDefaultValue: '',
			pickerOptions: {}
		};
	},
	computed: {
		monthList() {
			let monthList = [];
			for (var i = 1; i < 13; i++) {
				monthList.push({
					label: `${i}月`,
					value: i
				});
			}
			return monthList;
		}
	},
	mounted() {
		this.initpickerOptions();
	},
	methods: {
		// 初始化picker选择参数
		initpickerOptions() {
			let that = this;
			this.pickerOptions.shortcuts = [];
			// 给date选择器加上12个月的快捷方式
			this.monthList.forEach((item, index) => {
				this.pickerOptions.shortcuts[index] = {};
				this.pickerOptions.shortcuts[index]['text'] = item.label;
				this.pickerOptions.shortcuts[index]['onClick'] =(picker)=> {
					// 获取选择器中的年份，
					let curYear = that.$refs['elPicker'].picker.year;
					// 月份则是用户点击哪个月就是哪个月
					let curMonth = item.value;
					// 获取用户选择某年某月的第一天和最后一天
					let assignMoFiAndAf = that.getAssignMoFiAndAf(curYear, curMonth);
					let curFirstDay = assignMoFiAndAf.kingFirstDay;
					let curLastDay = assignMoFiAndAf.kingLastDay;
					// 获取某年某月的所有日期
					let curDays = that.getAllDate(curFirstDay, curLastDay);
					let newcurDays = [];
					// 设置picker的默认值，解决选择完某月的快捷方式后，重新打开picker后的显示问题
					that.kingDefaultValue = curDays[0];
					// 设置赋值给picker的时间值，只有这样才能设置成功（还有其他办法，请大神指教）
					if (curDays.length > 0) {
						curDays.forEach(item => {
							newcurDays.push(new Date(new Date(item).setHours(0, 0, 0, 0)));
						});
					}
					picker.$emit('pick', newcurDays);
				};
			});
		},
		// 获取指定月份的第一天和最后一天
		getAssignMoFiAndAf(y, m) {
			let firstDay = new Date(y, m - 1, 1);
			let lastDay = new Date(y, m, 0);
			let kingFirstDay = this.formatDate(firstDay, 'YYYY-MM-dd');
			let kingLastDay = this.formatDate(lastDay, 'YYYY-MM-dd');
			return {
				kingFirstDay,
				kingLastDay
			};
		},
		// 格式化日期
		formatDate(date, type) {
			date = new Date(date);
			let myyear = date.getFullYear();
			let mymonth = date.getMonth() + 1;
			let myweekday = date.getDate();
			if (!!type) {
				mymonth < 10 ? (mymonth = '0' + mymonth) : mymonth;
				myweekday < 10 ? (myweekday = '0' + myweekday) : myweekday;
				if (type == 'YYYY-MM-dd') {
					return `${myyear}-${mymonth}-${myweekday}`;
				} else {
					return `${myyear}-${mymonth}-${myweekday}`;
				}
			} else {
				return `${mymonth}月${myweekday}日`;
			}
		},
		// 中国标准时间format yyyy-mm-dd
		formatAllDate(time) {
			let ymd = ''
			let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
			let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
			ymd += time.getFullYear() + '-' // 获取年份。
			ymd += mouth + '-' // 获取月份。
			ymd += day // 获取日。
			return ymd // 返回日期。
		},
		/*
		 **获取开始和结束日期中间的所有日期(包括开始和结束日期)
		 **start:开始日期(yyyy-mm-dd)
		 **end:结束日期(yyyy-mm-dd)
		 */
		getAllDate(start, end) {
			let dateArr = [];
			let startArr = start.split('-');
			let endArr = end.split('-');
			let db = new Date();
			db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2]);
			let de = new Date();
			de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2]);
			let unixDb = db.getTime();
			let unixDe = de.getTime();
			let stamp;
			const oneDay = 24 * 60 * 60 * 1000;
			for (stamp = unixDb; stamp <= unixDe; ) {
				dateArr.push(this.formatAllDate(new Date(parseInt(stamp))));
				stamp = stamp + oneDay;
			}
			return dateArr;
		}
	}
};
</script>

<style lang="scss">
// 解决picker的快捷方式为12个月的时候，后面两个月在面板上面看不到的问题
.kingChangePickPanelPaBo {
	.el-picker-panel__body-wrapper {
		.el-picker-panel__sidebar {
			padding-bottom: 50px;
		}
	}
}
</style>