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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php FPDF类库应用实现代码
2009/03/20 PHP
php 将excel导入mysql
2009/11/09 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
领导干部贪图享乐整改措施
2014/09/21 职场文书
县委务虚会发言材料
2014/10/20 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers