【VUE】日期选择组件-快捷选择昨日/近7日/近30日

SZnA1

已于 2023-03-28 16:42:40 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 elementui 前端框架

于 2023-03-20 14:30:57 首次发布

本文链接：https://blog.csdn.net/liusuihong919520/article/details/129666887

该代码段展示了在Vue2应用中，如何结合ElementUI和moment库创建一个日期筛选器。组件限制用户最多选择90天内的日期，并默认显示近30天的日期范围。同时提供了快捷选择功能，如昨日、近7日和近30日。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于Vue 2 项目
依赖于elementUI
需安装【moment】
限制最多选择天数为 90天
默认选择近30天可修改

<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>