封装日期选择器筛选组件(月度+季度+年度+单选+多选+连选)

已于 2023-11-24 09:54:01 修改
阅读量889 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-11-24 09:51:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43259189/article/details/134591628
版权
本文介绍了如何在Element-UI的el-date-picker组件基础上扩展功能，实现日期的月度、季度、年度选择以及单选、多选和连选模式，并分享了封装的自定义日期筛选组件的详细过程和效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、前言

需求：根据日期去筛选数据，分月度季度年度+单选多选连选。Element-UI组件中的el-date-picker只能实现月份单选、月份连选和年份单选，其他都需要自己再写组件整合。所以我封装了一个这个组件供之后使用。实现效果如下图所示：

企业微信截图_16536392753732.png
详情查看此篇文章：封装日期选择器筛选组件(月度+季度+年度+单选+多选+连选)

@Joey
关注
elementUI + moment.js 日期选择器（年、月、日、周、季度）
yuanbotao219的博客
12-21 2094
elementUI + moment.js
vue + element 日期范围选择器（ 日期不可选范围）切换日期格式
srz1128的博客
09-19 1909
在业务中使用日期选择时，通常会遇到要限制日期范围的情况，这里不止需要日期范围还需要月份范围切换选择，我也是通过在网上寻找适合我项目的代码综合起来实现下面的结果： 下面我们来实现结果中的代码 <el-form-item label="报表日期维度：" style="margin-right: 15%;"> <el-radio-group v-model="radioTreaty" @change="changeHandler"> .
vue 封装月份多选组件
金乌的博客
05-18 3187
element el-date-picker 还没有 type="months" 可以选择多个月份的功能。现在若想选则多个月份，可直接使用element。本文仅对之前写的月份组件做个记录。一、直接使用el-date-picker type="months"1、新建组件 SelectMonths.vue。2、使用组件 SelectMonths。
一个简约美观的月份选择器插件month-picker
11-08
这是一个jquery插件，可以实现年月份选择功能，简约美观，短小精悍，方便使用，同时也适合jquery插件开发学习。
【Axure元件分享】月份范围选择器
最新发布
招风的黑耳优快云
04-02 475
Axure月份范围选择器是一个月份范围下拉筛选元件，支持月份范围定义选择。组件自动加载系统当前年月份作为默认值，用户可通过箭头图标或键盘快捷键快速切换年份月份，其样式支持高度定制，包括颜色主题、字体尺寸及交互反馈，可无缝嵌入表单、弹窗或侧边栏等场景。该组件广泛应用于数据筛选、用户注册及项目管理等原型设计需求。例如，在统计报表工具中，用户可通过选择起始年月与结束年月，动态加载指定时间范围内的数据集。元件已通测试优化，确保在复杂原型中保持流畅响应，是提升时间筛选类交互效率的理想选择。
移动端年、月、周、日时间选择器（基于Vant+Vue3）
weixin_44217374的博客
12-04 5312
开发移动app项目时，需要选择年、月、周、日下面的具体时间范围，比如年：xxxx年01月01日至xxxx年12月31日；月：当前年加上选择的月份的日期范围；周：当前年的某一周的时间范围；日期：当前年+当前月份+选择的日期；于是封装了个组件,用的是vant组件库。先安装组件库依赖npm i vant。
封装一个Element-UI多功能时间选择组件：【昨天、今天 或近7天、近30天等其他任意天数】。搭配dayjs使用。
Blues_han的博客
07-31 765
工作中的组件封装
vue-monthly-picker-仅适用于月份和年份选择器的Vue.js组件-Vue.js开发
05-27
vue-monthly-picker Vue每月选择器组件检出演示位于https://ittus.github.io/vue-monthly-picker/支持安装npm安装vue-monthly- vue-monthly-picker Vue每月选择器组件检出演示位于https： //ittus.github.io/vue-monthly-picker/支持安装npm install vue-monthly-picker-保存从'vue-monthly-picker'导入VueMonthlyPicker Vue.component（'my-component'，{component：{ VueMonthlyPicker}}; 用法 注意：v-model绑定值必须是矩对象。可用道具道具类型默认描述
基于Vue和ElementUI的日期选择器组件设计源码
09-26
日期选择器组件支持月度、季度和年度的选择模式，同时具备单选、多选和连选的多种选择方式，这要求开发人员对日期计算和状态管理有深入的了解，以便正确处理不同选择模式下的逻辑。 CSS样式文件使得组件在视觉上...
企业数字化转型：技术驱动业财融合的方案及落地实践
睿文的博客
01-26 857
业财融合的一种方案
NC开发笔记——二开知识点
热门推荐
獨立小橋風滿袖
05-06 2万+
用友集团ERP客户化开发系列丛书 NC客户化开发进阶 培训教程 V2.0版 本教程是用友软件股份有限公司内部培训资料，只限于用友公司内部开发应用，任何人未经过事先书面许可不得扩大本教程的使用范围。同样，未经过用友公司书面许可，任何人不得以任何形式对本手册进行增删、改编、节选、翻译、翻印或仿制，违者必究！ ?本手册的著作权属于用友软件股份有限公司 版权所有?翻制必
month-picker:纯Javascript简单月份选择器
05-06
选择月 纯Javascript简单的月份选择器。 如何使用它 ？ var eltInput = document.getElementById( 'mois' ); monthPickerFactory.createMonthPicker( eltInput ); 例子
web端 日期选择器 月份选择器 时间选择器 时间范围选择器
03-23
年份、月份、日份、日期范围选择器，9种类型
黑马头条项目经验话术
qq_45195447的博客
10-28 2942
注意：一定要追求真实，一定要给一个真实背景。千万别完全照着头条课件上的东西去说，很容易撞车。项目介绍三要素：项目介绍、岗位职责、业绩、技术亮点下面的话术中，项目名称自己适当修改一下，依据所在城市进行包装。话术1:好的面试官，我最近做的这个项目是融媒体项目，准确来讲是一个融媒体平台，项目是我们公司自研的，核心业务就是基于我们公司自有的媒体资源、社群、自媒体资源进行整合。基于我们研发的融媒体平台，构建了多款App,分别针对不同的客户群体。
vue3+ant之实现月份多选组件
Yujis的博客
12-27 1079
vue3+ant之实现月份多选组件
java.Swing中的月份选择器
weixin_33786077的博客
11-21 444
背景： 　　最近在做个Java程序，用来做客户端，使用Swing来开发，界面需要选择一个月份，这个时候使用日期选择器就很蹩脚，不太好应用，网上搜了一会儿找不到合适的拿来直接用，所以在其中一个博客上面找到一个DateChooser的类进行修改，用于进行月份选择；修改后可以拿来使用，对于业务的场景使用OK了，后续比如增加月份选择后再选择等操作还没有实现，后续有空再增加，另外还有部分不再使用的代码还没...
微信小程序 原生时间选择器 月份范围 几月至几月 封装组件 父子组件
weixin_58346650的博客
06-13 1705
效果如图所示 需求分析：默认显示当前年份1月到1月 选择月份上面的文字随之变化 年份-获取1900年到现在 月份-第一列月份12个月所以选择 第二个月份随着第一个选择而变化 大于第一个选择的月份 ...
vue3 多区间时间选择器组件
YONJIUJIU的博客
10-07 1979
24小时的区间选择，间隔为0.5小时，选择后的显示时间段文字。选择方式为点击，点击一次为开始选择，鼠标右移为增加选择区间，左移为清除选中。
element-ui 月份选择器，当所选月份为当前月时，获取当天日期 。非当前月时，获取所选月的最后一天
m0_67841039的博客
11-16 3438
日期设置，所选月份的最后一天，所选月份的第一天
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值