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 函数速查表
Feb 07 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
vue.js表格分页示例
Oct 18 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
js+h5 canvas实现图片验证码
Oct 11 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/16 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php邮件发送的两种方式
2020/04/28 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
django项目中新增app的2种实现方法
2020/04/01 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
中国梦读书活动总结
2014/07/10 职场文书
感恩教育观后感
2015/06/17 职场文书
催款函范本大全
2015/06/24 职场文书
修辞手法有哪些?
2019/08/29 职场文书