当前位置: 首页 > news >正文

【告别双日期面板!一招实现el-date-picker智能联动日期选择】

告别双日期面板!一招实现el-date-picker智能联动日期选择

  • 1.需求背景
  • 2.DateTimePicker 现状图
  • 3.日期选择器实现代码
  • 4.日期选择器实现效果图
  • 5.日期时间选择器实现代码
  • 6.日期时间选择器实现效果图

1.需求背景

在用户使用时间查询时,我们经常需要按月份筛选数据。但默认的 el-date-picker 组件在 type=“daterange” 时会显示双月份面板,而我们需要:

1.只显示单个月份面板
2.强制用户只能选择同一月份内的日期范围

2.DateTimePicker 现状图

2.1 日期选择器
在这里插入图片描述
2.2 DateTimePicker 日期时间选择器
在这里插入图片描述

3.日期选择器实现代码

主要是通过 css 样式实现:

/* 隐藏右边日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header
div {display: none !important;height: 800px;
}
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header {width: 60px;top: -331px;left: 230px;
}
/* 设置整体日期面板的宽度 */
.el-picker-panel.el-date-range-picker.el-popper {width: 322px;
}/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {border-right: none;
}/* 左边日期面板宽度 */
.el-picker-panel__content {width: 63% !important;
}.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-range-picker__header {top: -281px;
}
.el-date-range-picker__content.is-left {height: 270px;
}

4.日期选择器实现效果图

在这里插入图片描述

5.日期时间选择器实现代码

再上述DateTimePicker 日期选择器实现代码的基础上,再进行调整

.el-date-range-picker__time-picker-wrap:first-child {display: none !important;
}
.el-date-range-picker__time-header {width: 62%;
}

6.日期时间选择器实现效果图

在这里插入图片描述
当我们在使用element组件时,会遇到需要修改组件的样式,但是样式无法覆盖原样式的情况。
用popper-class属性,给组件传递样式

 <el-date-pickerv-model="value1"type="date"popper-class="customs-style"placeholder="选择日期"></el-date-picker>

注意: 1.具体的位移值px,根据自己页面数据调整
2. 自定义样式popper-class属性只能是全局样式,如果在

相关文章:

【告别双日期面板!一招实现el-date-picker智能联动日期选择】

告别双日期面板&#xff01;一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景 在用户使用时间查询时&#xff0c;我们经常需要按月份筛选…...

现今大语言模型性能(准确率)比较

现今大语言模型性能(准确率)比较 表头信息:表的标题为“大语言模型性能比较结果”(英文:Table 1: Large Language Model Performance Comparison Results),表明该表是用于对比不同大语言模型的性能。列信息: 模型:列出参与比较的不同大语言模型名称,包括LLAMA3(70B)…...

程序诗篇里的灵动笔触:指针绘就数据的梦幻蓝图(水文,勿三)

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 这一节我们来学习指针的相关知识&#xff0c;学习内存和地址&#xff0c;指针变量和地址&#xff0c;包…...

在 UniApp 中实现中间凸起 TabBar 的完整指南

如何在 UniApp 中设置中间 TabBar 凸起效果 在移动应用开发中&#xff0c;TabBar 是常见的导航组件&#xff0c;而中间凸起的 TabBar 按钮则是一种流行的设计风格&#xff0c;常用于突出重要功能&#xff08;如发布、拍照等&#xff09;。UniApp 提供了 midButton 属性&#x…...

Redis大key

Redis大key基本概念&#xff0c;影响 Redis 大 key 指在 Redis 中存储了大量数据的键&#xff0c;它会对 Redis 的性能和内存管理产生影响。 大key的定义与value的大小和元素数量有关&#xff0c;但这个定义并不是绝对的&#xff0c;而是相对的&#xff0c;具体取决于系统的使用…...

WPF高级 | WPF 与数据库交互:连接、查询与数据更新

WPF高级 | WPF 与数据库交互&#xff1a;连接、查询与数据更新 前言一、数据库交互基础概念1.1 数据库简介1.2 数据访问技术 二、WPF 与数据库连接2.1 连接字符串2.2 建立连接 三、WPF 中的数据查询3.1 使用ADO.NET进行数据查询3.2 使用 Entity Framework 进行数据查询3.3 使用…...

CogBlobTool工具

CogBlobTool是一款专用于图像斑点检测于分析的 工具&#xff0c;通过灰度值阈值分割和特征过滤&#xff0c;帮助在复杂背景中提取目标区域&#xff0c;并计算几何属性。 效果图 注意&#xff1a;在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能 斑点检测于…...

C# WinForm程序中如何调试dll接口

公司的SF系统是自主开发的。不同的机种会有不同数据记录保存的需求&#xff0c;尤其是客户SQE更是各种奇思妙想......于是做了一个接口&#xff0c;实践之下效果还不错呢。 每每总是忘记怎么调试接口&#xff0c;特记录下备查。首先要将&#xff0c; 1 DLL项目与WinForms项目…...

自然语言处理:词频-逆文档频率

介绍 大家好&#xff0c;博主又来给大家分享知识了。本来博主计划完成稠密向量表示的内容分享后&#xff0c;就开启自然语言处理中文本表示的讲解。可在整理分享资料的时候&#xff0c;博主发现还有个知识点&#xff0c;必须得单独拎出来好好说道说道。 这就是TF-IDF&#xf…...

【银河麒麟高级服务器操作系统】服务器测试业务耗时问题分析及处理全流程分享

更多银河麒麟操作系统产品及技术讨论&#xff0c;欢迎加入银河麒麟操作系统官方论坛 https://forum.kylinos.cn 了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer…...

基于大数据的民宿旅馆消费数据分析系统

【大数据】基于大数据的民宿旅馆消费数据分析系统&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统可以揭示民宿市场的消费模式和价格分布情况&#xff0c;帮助理解消费者偏好、价格走势及…...

Spring-AI搭建企业专属知识库 一

环境介绍&#xff1a;Spring3.3.2 JDK 21 POM文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&…...

极简本地体验deepseek大模型教程

一 题外随感&#xff1a;时代之问 就像狄更斯在双城记中所述&#xff0c;“这是最好的时代&#xff0c;这是最坏的时代”。每一代人都有其所处的时代&#xff0c;每一个时代都有其所谓好的一面和不那么好的一面。很多时候随口的一句大环境不好&#xff0c;就似乎给了自己一个最…...

RabbitMQ系列(五)基本概念之Queue

在 RabbitMQ 中&#xff0c;Queue&#xff08;队列&#xff09; 是存储消息的容器&#xff0c;也是消息传递的核心载体。以下是其核心特性与作用的全方位解析&#xff1a; 一、Queue 的定义与核心作用 消息存储容器 Queue 是 RabbitMQ 中实际存储消息的实体&#xff0c;生产者…...

【记录】成为创作者的第 730 天(两年)

收获 还是总在感叹走到今天收获的一切&#xff0c;都是自己曾经不敢想的。 无论是靠自己努力拿到的 Offer&#xff0c;还是在 CSDN 网站上结交的网友和前辈们&#xff0c;都是我莫大的荣幸和财富&#xff0c;感恩一切、感恩自己。 过去一年的收获真的数不胜数&#xff0c;抛…...

深度剖析数据分析职业成长阶梯

一、数据分析岗位剖析 目前&#xff0c;数据分析领域主要有以下几类岗位&#xff1a;业务数据分析师、商业数据分析师、数据运营、数据产品经理、数据工程师、数据科学家等&#xff0c;按照工作侧重点不同&#xff0c;本文将上述岗位分为偏业务和偏技术两大类&#xff0c;并对…...

【XSS】DVWA靶场XSS攻击

一、XSS攻击 1.1. XSS 攻击简介 XSS&#xff08;Cross-Site Scripting&#xff0c;跨站脚本攻击&#xff09;是一种常见的Web安全漏洞&#xff0c;它允许攻击者在受害者的浏览器中执行恶意脚本。攻击者通常通过在Web应用程序中注入恶意脚本代码&#xff08;如JavaScript&…...

Fiddler在Windows下抓包Https

文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量&#xff08;可选&#xff09;解决抓取 HTTPS 失败问题1.Fiddler证书过期了 默认情况下&#xff0c;Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密&#xff1a; 1…...

04 路由表的IP分组传输过程

目录 1、路由表的核心结构 2、IP分组传输过程和数据包转发过程 2.1、IP分组传输过程 2.2、数据包转发过程 2.3、IP分组传输过程和数据包转发的区别 3、数据包的变化 3.1、拓扑结构 3.2、传输过程详解&#xff08;主机A → 主机B&#xff09; 3.2.1、主机A发送数据 3.2…...

AI Agent 定义与核心要素详解

AI Agent&#xff08;人工智能代理&#xff09;是一种能够感知环境、自主决策并执行任务以达成目标的软件实体。它结合了感知、推理、学习和行动能力&#xff0c;能够在复杂环境中独立或协作工作。以下是其核心要素&#xff1a; 1. 感知 AI Agent 通过传感器或数据输入感知环…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...