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组件学习教程进行学习。

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

赞 (0)

相关推荐

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • Vue2.0 UI框架ElementUI使用方法详解

    Vue2.0 UI框架ElementUI使用方法详解

    今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

  • 详解用webpack2.0构建vue2.0超详细精简版

    详解用webpack2.0构建vue2.0超详细精简版

    npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015

  • Vue2.0使用过程常见的一些问题总结学习

    最近在学习Vue,今天正好写个学习笔记,把以前遇到的错误给总结一下. Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使

  • vue2.0获取自定义属性的值

    最近在项目中使用了vue.js.在爬坑的路上遇到了很多问题.这里都会给记录下来,今天要说的是怎么获取自定义属性的值. HTML <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script> <meta charset="utf-8"> <title>JS Bin</title&g

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

    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.修复已知

  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    vue页面结构 在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(

  • vue实现自定义日期组件功能的实例代码

    vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l

  • Vue日期时间选择器组件使用方法详解

    Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • vue实现移动端轻量日期组件不依赖第三方库的方法

    vue实现移动端轻量日期组件不依赖第三方库的方法

    不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:   https://github.com/BeckReed/datepicker-for-vue 2.用法:参见 src/view/demo.vue 文件的用法,简单易懂 <div> <h3>三列(年月日)日期弹窗示例--带标题)</h3> <button class="blue-btn" @click="togglePicker2">显示三列带标题日

  • Vue.js组件通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址: https://github.com/answershuto/learnVue . 在学习过程中,为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issu

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • 关于vue.js组件数据流的问题

    关于vue.js组件数据流的问题

    一.组件 组件,可以说是现代前端框架中必不可少的组成部分.使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义.前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即.基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自的实现.这里我们来分析一下 vue 的组件,重点关注数据的流向. 二.vue 组件 vue 的组件,创建模

  • Vue shopCart 组件开发详解

    一.shopCart组件 (1) goods 父组件和 子组件 shopCart 传参 deliveryPrice:{ // 单价 从json seller 对象数据中获取 type:Number, default:0 }, minPrice:{ // 最低起送价 从json seller 对象数据中获取 type:Number, default:20 } 其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据 中 seller 对象下 获得.所以在good

随机推荐