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中两个感叹号的作用说明
Dec 28 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
vue之数据交互实例代码
Jun 16 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
express启用https使用小记
May 21 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 时间计算问题小结
2009/01/04 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JS如何生成动态列表
2020/09/22 Javascript
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
商务助理岗位职责
2013/11/13 职场文书
十八大闭幕感言
2014/01/22 职场文书
检讨书格式范文
2015/05/07 职场文书
天堂的孩子观后感
2015/06/11 职场文书
教师节主题班会教案
2015/08/17 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python