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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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
php注销代码(session注销)
2012/05/31 PHP
php实现简单的上传进度条
2015/11/17 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python新手入门最容易犯的错误总结
2017/04/24 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
公务员培训心得体会
2013/12/28 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
会计求职简历自我评价
2015/03/10 职场文书
党性修养心得体会2016
2016/01/21 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python