一个用vue2.0写的日期控件,可以支持简单的年月日选择。地址:https://github.com/Stevenzwzhai/vue-datepicker。

首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),date.getMonth(),date,getDate())。在这里主要的一点就是根据选择的年和月份去设定当月的天数,使用设定日期,date.setDate(year, month, 0);这里要注意的是,获取哪个月month就是几,day设为零。而获取当前日期时月份要减一,因为在js的Date对象中月份是0~11.

接下来是关于滑动,在这里使用css3的translate3d,由于是用移动端,因此使用3d动画时可以自动开启设备加速,在一定程度上提高性能。这里只要仔细计算没什么大问题,还要要注意边界问题,滑出边界肯定是不行的。另外滑动加一点时间和动画函数可以使得滑动更加美观,我是用来transition-timing-function:ease-out。

这里做的是一个组件,所以自然要把设定的时间返回,就涉及到父子组件通信,vue2.0去掉了dispatch,就用$on和$emit就好。具体使用方法,在官网或者imooc都有。

vue DatePicker vue2.0的日期插件的更多相关文章

  1. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  2. Vue:Vue2.0搭建脚手架

    随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...

  3. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

  4. jquery日期插件jquery.datePicker参数

    1.效果图 2.引入JS.CSS文件 jquery-ui.min.css和jquery-ui.min.js文件 Includes: core.js, widget.js, mouse.js, posi ...

  5. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  6. 采用Vue2.0开发的分页js组件

    2017-11-17 19:14:23 基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js 由于项目需求,要求使用 Vue2.0 开 ...

  7. Vue组成和第3方插件

    vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0). 第三方插件:vue-scroller,vue-lazyload,vue-awesome-sw ...

  8. [js插件]JqueryUI日期插件

    引言 之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框,也顺便将里面的常用的日期插件和文本框智能提示插件,也学习了一下. 使用方法 首先在项目中引入以下文件: <!-- 日期插件 默 ...

  9. 为My97DatePicker日期插件设置默认日期

    datepicker.zip 为My97DatePicker日期插件设置默认日期,开始日期为系统日期的前一个月,结束日期为系统日期: 开始日期不能大于结束日期,且都不能大于今天: 开始日期-maxDa ...

随机推荐

  1. 解读ASP.NET 5 & MVC6系列(11):Routing路由

    新版Routing功能介绍 在ASP.NET 5和MVC6中,Routing功能被全部重写了,虽然用法有些类似,但和之前的Routing原理完全不太一样了,该Routing框架不仅可以支持MVC和We ...

  2. 【WPF】 通过FarPoint显示Excel

    1.FarPoint 只支持winform,在Wpf中要引用:WindowsFormsIntegration.dll2.*.xaml文件引用    xmlns:wfi ="clr-names ...

  3. C/C++ 标准输入输出重定向

    转载自:http://www.cnblogs.com/hjslovewcl/archive/2011/01/10/2314356.html 这个对经常在OJ上做题的童鞋们很有用.OJ基本都是用标准输入 ...

  4. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  5. RESTful API 设计指南

    转自:http://www.ruanyifeng.com/blog/2014/05/restful_api.html 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机. ...

  6. How to Disable Strict SQL Mode in MySQL 5.7

    If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...

  7. 用iMindMap如何提高我们绩效

    iMindMap模板中的向导功能可以帮助用户快速的建立起对应类型的思维导图,帮助初学者用户更快的掌握iMindMap.本文就介绍了iMindMap模板向导中的绩效辅导思维导图. 我们打开iMindMa ...

  8. Linux下如何查找.sh后缀的文件

    find / -name *.sh或locate *.shfind 与locate的区别:locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称

  9. Shell入门

    前言 日常用Python多一些,不过很多时候shell脚本更简单实用一些,所以有必要熟悉一下shell脚本.当然shell有他特定的一些场景,比方说我曾经改过一个vpn断线自动重连的脚本,简单实用. ...

  10. Linux sudo 命令的应用

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...