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

news/2024/11/30 4:28:57/

需要获取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 和 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};}

运行测试截图

运行测试截图


http://www.ppmy.cn/news/1551096.html

相关文章

基于Matlab SIR模型的传染病动态模拟与扩展研究

SIR模型作为流行病学领域的经典模型&#xff0c;在研究传染病传播规律和动态变化方面发挥了重要作用&#xff0c;为分析疾病在特定人群中的传播趋势提供了理论基础和工具支持。然而&#xff0c;传统的SIR模型假设人口总数不变且免疫力永久有效&#xff0c;在面对实际复杂的疫情…

Python基础学习-12匿名函数lambda和map、filter

目录 1、匿名函数&#xff1a; lambda 2、Lambda的参数类型 3、map、 filter 4、本节总结 1、匿名函数&#xff1a; lambda 1&#xff09;语法&#xff1a; lambda arg1, arg2, …, argN : expression using arg 2&#xff09; lambda是一个表达式&#xff0c;而不是一个语…

Vue3自定义组件里数据双向绑定的实现

一、组合式API里的写法 1、defineModel defineModel()返回的值是一个ref&#xff0c;它可以像其他ref一样被访问以及修改&#xff0c;不过它能起到在父组件和当前变量之间的双向绑定的作用。 它的.value和父组件的v-model的值一起更新当它的子组件变更了&#xff0c;会触发父…

人力资源项目学习

特点 特点1&#xff1a;对象转化为树形结构 好处 将对象转化为树形结构&#xff08;例如&#xff1a;菜单、权限等&#xff09;有许多实际的好处&#xff0c;特别是在处理具有层级关系的数据时。通过您的代码实现的树形结构转换&#xff0c;可以带来以下几个显著优势&#x…

如何利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物的影响?

原文&#xff1a;如何利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物的影响&#xff1f;https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247630247&idx8&sn2debedc63a42cfd24ed4c8afbb8c575d&chksmfa8dbc40cdfa3556dc0ec660d00fcd7e8c9a9ca75a8…

Web登录页面设计

记录第一个前端界面&#xff0c;暑假期间写的&#xff0c;用了Lottie动画和canvas标签做动画&#xff0c;登录和注册也连接了数据库。 图片是从网上找的&#xff0c;如有侵权私信我删除&#xff0c;谢谢啦~

网络安全内容整理一

前言 整理博客&#xff0c;统一到常用的站点。 基础知识 网络安全的三个基本属性&#xff1a;CIA三元组 机密性 Confidentiality完整性 Integrity可用性 Availability 网络安全的基本需求 可靠性、可用性、机密性、完整性、不可抵赖性、可控性、可审查性、真实性 网络安…

小游戏聚合SDK的工具类封装

文章目录 前言工具类单例日志打印输入框的封装前言 之前的文章写了如何开发小游戏聚合SDK,既然是聚合SDK,工具类的封装也比较重要,做好基础搭建后续在接入其他渠道的时候能大大减少工作量。 工具类 单例 初始化的配置信息,比如应用ID 、渠道ID等需要全局使用,而且初始…