vue+element ui：日期范围小功能

文章目录

• • 概要
  • 整体架构
  • 技术名词解释
  • 小结

概要

客户提出需求：

一个日期范围组件，当我们进去时候随便选中第一个日期时候，就限制用户选中之后一个月范围内的时间。清空时间后又可以任意选择第一个日期。

整体架构

首先，用element ui 里面的el-date-picker组件

<el-date-picker
	ref="datePicker"
	v-model="date"
	type="daterange"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	style="width: auto"
	:picker-options="pickerOptions"
	>
</el-date-picker>

这是pickerOptions属性配置：

data() {
	return {
        pickerOptions: {
				// pickerOptions 属性来传递配置选项，以定制日期选择器的行为和外观。
				onPick(val) {
					// onPick 是日期选择器组件中的一个事件回调函数，在用户选择日期时触发。 里面有minDate 和 maxDate值返回
					if (val.minDate) {
						this.minDate = val.minDate;
					} else this.minDate = null;
				},
				disabledDate: (time) => {
					// disabledDate 是日期选择器组件的一个选项属性，用于设置日期选择器中的禁用日期规则。
					if (this.minDate) {
						const startDate = new Date(this.minDate);
						const endDate = new Date(this.minDate);
						endDate.setDate(startDate.getDate() + 30); // 将结束日期设置为选定日期的后30天
						return time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime();
					} else {
						return false; // 如果未选定日期，则不禁用任何日期
					}
				},
			},
        };
	},

通过监听date里面数据是否发生变化，变化后清空minDate里面的数据。这样每次进组件时候都可以选择任意时间。

watch: {
	date: function (newVal) {
		// 监听里面是否有值，就清空 minDate 值 从而形成闭环
		// 每次进去选择时间时候就可以选择任意时间
		if (newVal && newVal[1]) {
			this.minDate = '';
		}
	},
},

created() {
	// 将 this.pickerOptions.onPick 方法绑定到组件实例上，可以确保在 onPick 方法中可以正确访问组件实例的属性和方法，从而避免出现上下文问题。
	this.pickerOptions.onPick = this.pickerOptions.onPick.bind(this);
},

技术名词解释

pickerOptions 是日期选择器组件（如 Element UI 中的日期选择器）的一个选项属性，用于设置日期选择器的配置选项。通过 pickerOptions 属性，您可以对日期选择器的外观、功能和行为进行定制。下面是它配置选项：

1. disabledDate: 一个函数，用于设置禁用的日期规则，用户无法选择被禁用的日期。
2. shortcuts: 快捷选项列表，用户可以通过点击快捷选项快速选择日期。
3. format: 设置日期的显示格式，例如 'yyyy-MM-dd'。
4. firstDayOfWeek: 设置一周的第一天是星期几。
5. showWeekNumbers: 是否显示周数。
6. isRange: 是否为日期范围选择器。
7. clearable: 是否显示清空按钮。
8. readonly: 是否为只读模式，用户无法手动输入日期。
9. onPick：用于在用户选择日期后触发相应的操作。当用户选择日期时，onPick 事件会被触发，并且会传入一个参数，该参数包含用户选择的日期信息

小结

这里主要是配置上会出现难点，每次进入时选中某个时间段出现日期限制的问题！！！