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

需要获取el-calendar 日历组件上的第1天和最后一天。可以通过document.querySelector()方法进行获取dom元素中的值,这样避免计算问题。

获取的过程中主要有两个难点,第1个是处理上1月和下1月的数据,第2个是跨年的数据。

直接贴代码,这个方法可以运用到1、点击上个月,今天、下个月三个按钮,实现点击获取最新的日历组件上的第1天和最后一天。2、通过watch实时监听。

javascript 复制代码
    getRange(date) {
      const today = date ? new Date(date) : new Date();

      // 初始化 startDate 和 endDate
      let 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');

      // 设置 startDate
      if (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`;
      }

      // 设置 endDate
      if (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
      };
    }

运行测试截图

相关推荐
大葱白菜14 分钟前
Java Set 集合详解:从基础语法到实战应用,彻底掌握去重与唯一性集合
java·后端
大葱白菜15 分钟前
Java Map 集合详解:从基础语法到实战应用,彻底掌握键值对数据结构
java·后端
添乱15 分钟前
「Java案例」判断是否是闰年的方法
java
FG.20 分钟前
Day22
java·面试
菜鸟的迷茫22 分钟前
Redis 缓存雪崩、穿透、击穿面试题深度解析与 Spring Boot 实战代码示例
java
珹洺33 分钟前
C++算法竞赛篇:DevC++ 如何进行debug调试
java·c++·算法
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
SHUIPING_YANG40 分钟前
根据用户id自动切换表查询
java·服务器·数据库
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
惊涛骇浪、1 小时前
SpringMVC + Tomcat10
java·tomcat·springmvc