自己封装了带有比较日期的datepicker组件

一个简单的带有快捷键和比较日期的date组件,参数较少,便捷,尤其针对实现数据统计模型需要跟之前日期对比功能

npm链接:https://www.npmjs.com/package/compare-date-picker

GitHub链接:https://github.com/Netpas/compare-datepicker

使用方法:

1.安装

npm install compare-date-picker@ --save

2.引入(main.js)

import compareDatePicker from 'compare-date-picker'

import 'compare-date-picker/dist/compareDatePicker.css'//css样式必须引入,否则显示是完全乱的

Vue.use(compareDatePicker)

3.参数

cusCompareShow  是否需要对比功能

originDate 选择的日期范围(时间戳格式)

compareDate 对比的日期范围(时间戳格式),这个参数只能用来获取,不能设置

divider 开始时间和结束时间的分隔符,默认为‘/’

OriginQuicky 自定义快捷键,如果设置了,将覆盖原有快捷键

4.事件

change 当选择开始日期和结束日期应用之后的回掉函数  

优势:

1.日期切换为滚动切换,快捷方便


2.智能根据点击的日期设置选择区间

3.可以选择对比日期段(如图选择对比的是一周前的日期)


自己第一次封装了一个日期组件,希望大家多多支持,如果有什么好的建议或使用过程中有什么坑,请留言,不胜感激,共同进步,如果觉得写的还不错,麻烦点个赞吧

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容