[VUE] Componente de selección de fecha: seleccione rápidamente ayer/últimos 7 días/cerca de 30 días

• Para proyectos Vue 2
• Depende del elemento UI
• [momento] necesita ser instalado
• Limite el número máximo de días seleccionados a 90 días 
• Casi 30 días están seleccionados de forma predeterminada y se pueden modificar.

<template>
	<!-- 日期筛选器 - 快捷选项【昨日、近7日、近30日】 -->
	<div class="date-picker">
		<div id="DatePickery730">
			<el-date-picker
				ref="refDatePicker"
				v-model="dateTime"
				:type="TimeType"
				:key="TimeType"
				align="right"
				unlink-panels
				range-separator="-"
				:picker-options="pickerOptions"
				value-format="yyyy-MM-dd"
				@change="chooseDate"
				:clearable="false"
				:editable="false"
			></el-date-picker>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	name: 'date-picker',
	props: {
		date: {
			type: Array,
			default: [],
		},
	},
	data() {
		return {
			minDate: '', //限制选择90天以内
			maxDate: '', //限制选择90天以内
			defaultValue: [],
			TimeType: 'daterange',
			dateTime: undefined,
			pickerOptions: {
				// 最多只能选择90天、且只能选择当日前日期
				onPick: ({ maxDate, minDate }) => {
					this.minDate = minDate;
					this.maxDate = maxDate;
					console.log(maxDate, minDate, '-');
				},
				disabledDate: (time) => {
					//查询时间跨度为90天
					if (this.minDate && !this.maxDate) {
						let range = 89 * 24 * 3600 * 1000;
						return (
							time.getTime() > Date.now() ||
							time.getTime() > this.minDate.getTime() + range ||
							time.getTime() < this.minDate.getTime() - range
						);
					}
					return time.getTime() > Date.now();
				},
				//日期选择快捷选择
				shortcuts: [
					{
						text: this.$t('datePicker.yesterday'),
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						},
					},
					{
						text: this.$t('datePicker.last7'),
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						},
					},
					{
						text: this.$t('datePicker.last30'),
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						},
					},
				],
			},
		};
	},
	mounted() {
		// 默认显示 近30天 日期
		this.dateTime = [
			moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD'),
			moment().subtract(1, 'days').startOf('day').format('YYYY-MM-DD'),
		];
		this.$emit('chooseDate', this.dateTime);
	},
	watch: {
		date(val) {
			this.dateTime = val;
		},
	},
	methods: {
		click() {
			this.$refs.refDatePicker.focus();
		},
		chooseDate(val) {
			this.$emit('chooseDate', val);
		},
	},
};
</script>

<style lang="scss">
#DatePickery730 {
	.dataBox {
		width: 500px;
		position: absolute;
		border: 1px solid black;
		z-index: 999;
		background-color: #fff;
	}

	.el-input__inner {
		padding: 3px;
		.el-range-separator {
			padding: 0px;
		}
	}

	.el-date-editor .el-range__close-icon {
		display: none; //隐藏右侧icon
		width: 0 !important;
	}
	.el-date-editor .el-range__icon {
		margin-left: 3px;
	}

	.el-input__inner {
		width: 200px;
	}
}
</style>