一个简单的带有快捷键和比较日期的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.日期切换为滚动切换,快捷方便
![ef332cb98296d5cc55fcfcc7c242c1b1.png](https://i-blog.csdnimg.cn/blog_migrate/b75b0b1fc109856c77f4a0cf7b27afc8.jpeg)
2.智能根据点击的日期设置选择区间
3.可以选择对比日期段(如图选择对比的是一周前的日期)
![ab78d0599db70354f813f4e782f8619c.png](https://i-blog.csdnimg.cn/blog_migrate/6b7f909fd2e91218aaa13be38c4e2d28.jpeg)
自己第一次封装了一个日期组件,希望大家多多支持,如果有什么好的建议或使用过程中有什么坑,请留言,不胜感激,共同进步,如果觉得写的还不错,麻烦点个赞吧