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字符串与数组
Jun 03 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解vue axios二次封装
Jul 22 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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中使用模板的方法
2008/05/24 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
JS定时器实例
2013/04/17 Javascript
javascript判断office版本示例
2014/04/11 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python如何定义带参数的装饰器
2018/03/20 Python
python-str,list,set间的转换实例
2018/06/27 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python模块相关知识点小结
2020/03/09 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
实习教师自我鉴定
2013/09/27 职场文书
自荐书模板
2013/12/15 职场文书
锦旗标语大全
2014/06/23 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
法定代表人免职证明
2015/06/24 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript