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 运算数的求值顺序
Aug 23 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
了解javascript中let和var及const关键字的区别
May 24 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 中文处理函数集合
2008/08/27 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
JavaScript简介
2015/02/15 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
js中this对象用法分析
2018/01/05 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
详细探究Python中的字典容器
2015/04/14 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python文件排序的方法总结
2020/09/13 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
高校自主招生自荐信
2013/12/09 职场文书
迟到检讨书5000字
2014/01/31 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
端午节演讲稿
2014/05/23 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
八年级历史教学反思
2016/02/19 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js