vue日期组件 支持vue1.0和2.0


Posted in Javascript onJanuary 09, 2017

vue-datetime

使用vue编写的时间组件,小巧实用,支持vue1.0,vue2.0

v1.0 功能:

1.支持同时展开多个日期选择框
2.支持单击选中和取消,可配置单选和多选
3.支持双击启动连续选择,支持正向连续,逆向连续和跳跃不可选日期
4.支持在日期选择框内直接切换月份
5.支持初始化不可点击日期(剩余的可选择)
6.支持初始化已选择日期(已选择日期高亮)
7.支持初始化可选择日期(剩余的不可选择)
8.同时初始化不可点击和可点击日期,将以可点击日期为准

v1.1:

1.修复已知bug

v1.2:

1.重构代码,使代码更优雅和简洁
2.性能优化
3.完善功能,使多时间框和原地切换时间共存
4.支持不传入options 和datelist的使,默认显示当前日期并且可原地切换日期

用法:<edit-time :datelist='datelist' :options='options'></edit-time>

datelist = [
 {
 year: undefined, // 日期初始年, 默认当前年
 month: undefined, // 日期初始月, 默认当前月
 multiSelect: true, // 日期是否可多选
 switch: false // 当前日期框是否支持切换年月份
 }
]
options = {
disable: [], // 不可选日期,格式: '2016-01-01'
// enable: [], // 可选日期,格式: '2016-01-01',enable和disable只能有一个,如果都有默认用enable
selected: [], // 已选择的day,格式: '2016-01-01'
callback: undefined // 点击日期回调函数, callback(selectDateList)
}

github源码地址;https://github.com/Stephen1993/vue-datetime

图示:

vue日期组件 支持vue1.0和2.0

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
jQuery编写设置和获取颜色的插件
Jan 09 #Javascript
图片懒加载插件实例分享(含解析)
Jan 09 #Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 #Javascript
简单实现jQuery多选框功能
Jan 09 #Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
You might like
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHP多进程简单实例小结
2019/11/09 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
幼儿园中班上学期评语
2014/04/18 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
冬季安全检查方案
2014/05/23 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
股东合作协议书
2014/09/12 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
项目备案申请报告
2015/05/15 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
后天观后感
2015/06/08 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle