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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
vuex进阶知识点巩固
May 20 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Vue实现点击当前行变色
Dec 14 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
python集合用法实例分析
2015/05/30 Python
python实现简单登陆流程的方法
2018/04/22 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python内置异常类型全面汇总
2020/05/28 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
中介业务员岗位职责
2014/04/09 职场文书
经典禁毒标语
2014/06/16 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫