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 相关文章推荐
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 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数据的方法
2007/03/16 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python Trie树实现字典排序
2014/03/28 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
用Python实现读写锁的示例代码
2018/11/05 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
金融专业个人求职信范文
2013/11/28 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
会议接待欢迎标语
2014/10/08 职场文书
美丽的大脚观后感
2015/06/03 职场文书