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 判断 object 的特定类转载
Feb 01 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
解析htaccess伪静态的规则
2013/06/18 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
计算机应届毕业生自荐信范文
2014/02/23 职场文书
商场周年庆活动方案
2014/08/19 职场文书
离婚财产处理协议书
2014/09/30 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书
个人更名证明
2015/06/23 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
教你怎么用python实现字符串转日期
2021/05/24 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android