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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
浅谈克隆 JavaScript
Nov 02 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
利用JS实现数字增长
2016/07/28 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python读写Excel文件的实例
2013/11/01 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python3解释器知识点总结
2019/02/19 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python中如何打包用户自定义模块
2020/09/23 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
搞笑获奖感言
2014/01/30 职场文书
周年庆典主持词
2014/04/02 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
关于幸福的感言
2015/08/03 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL