vue日期组件 支持vue1.0和2.0

 更新时间:2017年01月09日 15:30:36   作者:Stephen__  
这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • element-plus日历(Calendar)动态渲染以及避坑指南

    element-plus日历(Calendar)动态渲染以及避坑指南

    这篇文章主要给大家介绍了关于element-plus日历(Calendar)动态渲染以及避坑指南的相关资料,这是最近帮一个后端朋友处理一个前端问题,elementUI中calendar日历组件内容进行自定义显示,实现类似通知事项的日历效果,需要的朋友可以参考下
    2023-08-08
  • vant自定义引入iconfont图标及字体的方法步骤

    vant自定义引入iconfont图标及字体的方法步骤

    因为vantUI给的图标非常少,为了满足自己的需求,就应该找到一种方法来向vant添加自己自定义的图标,对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库,这篇文章主要给大家介绍了关于vant自定义引入iconfont图标及字体的方法步骤,需要的朋友可以参考下
    2023-09-09
  • vue不用import直接调用实现接口api文件封装

    vue不用import直接调用实现接口api文件封装

    这篇文章主要为大家介绍了vue不用import直接调用实现接口api文件封装,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue中动态渲染数据时使用$refs无效的解决

    vue中动态渲染数据时使用$refs无效的解决

    这篇文章主要介绍了vue中动态渲染数据时使用$refs无效的解决方案,具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 关于vue项目proxyTable配置和部署服务器的问题

    关于vue项目proxyTable配置和部署服务器的问题

    这篇文章主要介绍了关于vue项目proxyTable配置和部署服务器的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • elementplus el-table(行列互换)转置的两种方法

    elementplus el-table(行列互换)转置的两种方法

    本文主要介绍了elementplus el-table(行列互换)转置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • vue 实现根据data中的属性值来设置不同的样式

    vue 实现根据data中的属性值来设置不同的样式

    这篇文章主要介绍了vue 实现根据data中的属性值来设置不同的样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue2前端调用WebSocket有消息进行通知代码示例

    vue2前端调用WebSocket有消息进行通知代码示例

    在Vue项目中实现全局的消息链接监听主要涉及到了WebSocket技术,这是一种双向通信协议,允许客户端与服务器之间实时、高效地交换数据,这篇文章主要给大家介绍了关于vue2前端调用WebSocket有消息进行通知的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    这篇文章主要介绍了使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题,大家需要注意本文给提供的解决方案虽然能够解决现有问题,但是如果组件升级了,想要使用最新升级后的组件,还要再次修改代码,需要的朋友可以参考下
    2022-07-07
  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    这篇文章主要介绍了Vue注册模块与登录状态的持久化实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论