element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】

需要获取el-calendar 日历组件上的第1天和最后一天。可以通过document.querySelector()方法进行获取dom元素中的值，这样避免计算问题。
在这里插入图片描述
获取的过程中主要有两个难点，第1个是处理上1月和下1月的数据，第2个是跨年的数据。
直接贴代码，这个方法可以运用到1、点击上个月，今天、下个月三个按钮，实现点击获取最新的日历组件上的第1天和最后一天。2、通过watch实时监听。

    getRange(date) {const today = date ? new Date(date) : new Date();// 初始化 startDate 和 endDatelet startDate = null;let endDate = null;// 获取日历中的第一个和最后一个单元格let firstCell = document.querySelector('#pane-3 > div > div > div.el-calendar__body > table > tbody > tr:nth-child(1) > td:nth-child(1) > div > div > div:nth-child(1) > div > div');let lastCell = document.querySelector('#pane-3 > div > div > div.el-calendar__body > table > tbody > tr:nth-child(6) > td:nth-child(7) > div > div > div:nth-child(1) > div > div');// 设置 startDateif (firstCell && parseInt(firstCell.textContent.trim(), 10) > 1) {// 获取前一个月和年份let prevMonth = today.getMonth() - 1;let year = today.getFullYear();if (prevMonth < 0) {prevMonth = 11; // 上一年的12月year -= 1;}const monthStr = String(prevMonth + 1).padStart(2, '0'); // 月份从1开始const dayStr = String(firstCell.textContent.trim()).padStart(2, '0');startDate = `${year}-${monthStr}-${dayStr}`;} else {// 当月第一天const month = today.getMonth() + 1;const monthStr = String(month).padStart(2, '0');startDate = `${today.getFullYear()}-${monthStr}-01`;}// 设置 endDateif (lastCell && parseInt(lastCell.textContent.trim(), 10) < 30) {// 获取下一个月和年份let nextMonth = today.getMonth() + 1;let year = today.getFullYear();if (nextMonth > 11) {nextMonth = 0; // 下一年的1月year += 1;}const monthStr = String(nextMonth + 1).padStart(2, '0'); // 月份从1开始const dayStr = String(lastCell.textContent.trim()).padStart(2, '0');endDate = `${year}-${monthStr}-${dayStr}`;} else {// 当月最后一天const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();const month = today.getMonth() + 1;const monthStr = String(month).padStart(2, '0');endDate = `${today.getFullYear()}-${monthStr}-${String(lastDay).padStart(2, '0')}`;}// 返回包含 startDate 和 endDate 的对象return {startDate,endDate};}