vue2使用el-date-picker（无输入框版）

			<div class="TimeDays_box">
				<span style="margin-top: 0.1rem">统计时间:{{ today != "" ? today : days }}</span>
				<el-button-group>
					<el-button size="mini" :class="{ active: timeDim === 1 }" @click="getCurrentDate(1)">实时</el-button>
					<el-button size="mini" :class="{ active: timeDim === 7 }" @click="getCurrentDate(7)">7天</el-button>
					<el-button size="mini" :class="{ active: timeDim === 30 }" @click="getCurrentDate(30)">30天</el-button>
					<el-button size="mini" :class="{ active: timeDim === 'day' }" @click="openDatePicker('day', $event)">日</el-button>
					<el-button size="mini" :class="{ active: timeDim === 'week' }" @click="openDatePicker('week', $event)">周</el-button>
					<el-button size="mini" :class="{ active: timeDim === 'month' }" @click="openDatePicker('month', $event)">月</el-button>
				</el-button-group>
				<!-- 日历 -->
				<el-date-picker
					ref="datePicker"
					v-model="today"
					:type="timeDim === 'day' ? 'date' : timeDim === 'week' ? 'week' : 'month'"
					value-format="yyyy-MM-dd"
					@change="handleDateChange"
					style="visibility: hidden"
					:picker-options="pickerOptions">
				</el-date-picker>
			</div>

openDatePicker 方法:

• 这个方法接收一个参数 dim，表示用户想要打开的日期选择器的类型（'day'、'week' 或 'month'）。
• 它首先将 timeDim 设置为传入的 dim，用于后续切换日历类型。
• 使用 $nextTick 来确保DOM更新后执行下一步操作。
• 通过调用 handleFocus 和设置 pickerVisible 来手动打开日期选择器。

		openDatePicker(dim) {
			this.timeDim = dim;
			// 手动打开日期选择器
			this.$nextTick(() => {
				this.$refs.datePicker.handleFocus();
				this.$refs.datePicker.pickerVisible = true;
			});
		},

1. el-date-picker 组件:

   • ref="datePicker" 表示这个日期选择器将被引用为 datePicker。
   • v-model="today" 创建了一个数据绑定，将日历的选择结果绑定到 today 变量。
   • :type="timeDim === 'day' ? 'date' : timeDim === 'week' ? 'week' : 'month'" 根据 timeDim 的值动态设置日期选择器的类型。
   • value-format="yyyy-MM-dd" 指定绑定值的格式。
   • @change="handleDateChange" 表示当日期改变时，调用 handleDateChange 方法。
   • style="visibility: hidden" 表示初始时将日历设置为不可见，它将在 openDatePicker 方法中被设置为可见。
   • :picker-options="pickerOptions" 允许你自定义日期选择器的行为，但在这个例子中没有具体的选项设置。

2. timeDim 和 today 变量:

   • timeDim 是一个变量，默认值为0，表示默认时间维度为当前时间。它可以根据用户的选择动态改变，以决定日历的显示类型。
   • today 是一个变量，用于存储用户从日历中选择的时间。 today: "", //统计时间

handleDateChange 方法：

• 当用户在日期选择器中选择一个日期时，handleDateChange 方法会被调用。
• 方法首先获取用户选择的日期，并将其存储在 today 变量中。
• 根据 timeDim 的值（'day'、'week'、'month'），执行不同的逻辑来计算日期范围。

		handleDateChange(value) {
			// 根据选择的时间维度处理日期
			if (this.timeDim === "week") {
				//周维度，计算周的开始
				var date = new Date(value);
				var y = date.getFullYear();
				var m = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				const startOfWeek = y + "-" + m + "-" + (d - 1);

				//结束日期
				const endOfWeek = new Date(startOfWeek);
				endOfWeek.setDate(endOfWeek.getDate() + 6);
				var date = new Date(endOfWeek);
				var y = date.getFullYear();
				var m = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				const endOfWeekvalueDay = y + "-" + m + "-" + d;
				this.today = `${startOfWeek} ~ ${endOfWeekvalueDay}`;
				this.getList(this.today); //table数据
			} else if (this.timeDim === "month") {
				// 确保value是一个Date对象
				if (typeof value === "string") {
					value = new Date(value);
				}
				// 月维度，计算月的开始和结束日期
				const startOfMonth = new Date(value.getFullYear(), value.getMonth(), 1);
				const endOfMonth = new Date(value.getFullYear(), value.getMonth() + 1, 0);
				const startOfMonthFormatted = this.formatDate(startOfMonth);
				const endOfMonthFormatted = this.formatDate(endOfMonth);
				this.today = `${startOfMonthFormatted} ~ ${endOfMonthFormatted}`;
				this.getList(this.today); //table数据
			} else if (this.timeDim === "day") {
				console.log(value, "day");
				// 日维度
				this.today = `${value} ~ ${value}`;
				this.getList(this.today); //table数据
			}
		},

1. 计算周的开始和结束 (timeDim 为 "week"):

   • 使用 new Date(value) 创建一个日期对象。
   • 获取年、月、日，并格式化它们，以便于显示。
   • 计算周的开始日期，即选择的日期减去当天的周数。
   • 计算周的结束日期，即周的开始日期加上6天。
   • 再次格式化结束日期的年、月、日，并将其存储在 endOfWeekvalueDay 变量中。
   • 将周的开始和结束日期组合成一个字符串，并存储在 today 变量中。
   • 调用 getList 方法，并传入 today 变量，以获取相应的表格数据。

2. 计算月的开始和结束 (timeDim 为 "month"):

   • 确保用户选择的是一个日期对象，而不是字符串。
   • 计算月的开始日期，即选择的日期所在年的当月第一天。
   • 计算月的结束日期，即选择的日期所在年的当月最后一天。
   • 格式化月的开始和结束日期，并存储在 startOfMonthFormatted 和 endOfMonthFormatted 变量中。
   • 将月的开始和结束日期组合成一个字符串，并存储在 today 变量中。
   • 调用 getList 方法，并传入 today 变量，以获取相应的表格数据。

3. 日维度处理 (timeDim 为 "day"):

   • 直接将选择的日期存储在 today 变量中，并将其格式化。
   • 将选择的日期作为开始和结束日期存储在 today 变量中。
   • 调用 getList 方法，并传入 today 变量，以获取相应的表格数据。

4. formatDate 方法:

   • 这个方法应该是组件中定义的一个方法，用于将日期对象格式化为年-月-日的字符串。
   • 它应该被调用，并传入一个日期对象，返回格式化后的字符串。

style="visibility: hidden"这个属性设置了一个元素的visibility属性为hidden。这意味着元素在页面上是存在的，但是对用户是不可见的。在这个ui组件中建议不要使用display: none属性会导致日历选择错位

这段 CSS 代码用于自定义日历组件的样式，隐藏输入框和图标，并调整日期输入框的位置

::v-deep .custom-date-picker .el-input__inner {
  display: none;
}
::v-deep .custom-date-picker .el-input__icon {
  display: none;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  position: absolute;
  right: 1.5125rem;
  top: 0.5625rem;
}