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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
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
基于mysql的bbs设计(五)
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP获取文件行数的方法
2015/06/10 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python class的继承方法代码实例
2020/02/14 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
局域网定义和特性
2016/01/23 面试题
会计自荐信范文
2014/03/09 职场文书
妈妈活动方案
2014/08/15 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
论文答辩开场白大全
2015/05/27 职场文书
《1942》观后感
2015/06/08 职场文书
团委副书记工作总结
2015/08/14 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript