vue DatePicker vue2.0的日期插件
一个用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的日期插件的更多相关文章
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- Vue:Vue2.0搭建脚手架
随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...
- 基于VUE2.0的分页插件(很好用,很简单)
基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...
- jquery日期插件jquery.datePicker参数
1.效果图 2.引入JS.CSS文件 jquery-ui.min.css和jquery-ui.min.js文件 Includes: core.js, widget.js, mouse.js, posi ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- 采用Vue2.0开发的分页js组件
2017-11-17 19:14:23 基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js 由于项目需求,要求使用 Vue2.0 开 ...
- Vue组成和第3方插件
vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0). 第三方插件:vue-scroller,vue-lazyload,vue-awesome-sw ...
- [js插件]JqueryUI日期插件
引言 之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框,也顺便将里面的常用的日期插件和文本框智能提示插件,也学习了一下. 使用方法 首先在项目中引入以下文件: <!-- 日期插件 默 ...
- 为My97DatePicker日期插件设置默认日期
datepicker.zip 为My97DatePicker日期插件设置默认日期,开始日期为系统日期的前一个月,结束日期为系统日期: 开始日期不能大于结束日期,且都不能大于今天: 开始日期-maxDa ...
随机推荐
- 解读ASP.NET 5 & MVC6系列(11):Routing路由
新版Routing功能介绍 在ASP.NET 5和MVC6中,Routing功能被全部重写了,虽然用法有些类似,但和之前的Routing原理完全不太一样了,该Routing框架不仅可以支持MVC和We ...
- 【WPF】 通过FarPoint显示Excel
1.FarPoint 只支持winform,在Wpf中要引用:WindowsFormsIntegration.dll2.*.xaml文件引用 xmlns:wfi ="clr-names ...
- C/C++ 标准输入输出重定向
转载自:http://www.cnblogs.com/hjslovewcl/archive/2011/01/10/2314356.html 这个对经常在OJ上做题的童鞋们很有用.OJ基本都是用标准输入 ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- RESTful API 设计指南
转自:http://www.ruanyifeng.com/blog/2014/05/restful_api.html 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机. ...
- 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 ...
- 用iMindMap如何提高我们绩效
iMindMap模板中的向导功能可以帮助用户快速的建立起对应类型的思维导图,帮助初学者用户更快的掌握iMindMap.本文就介绍了iMindMap模板向导中的绩效辅导思维导图. 我们打开iMindMa ...
- Linux下如何查找.sh后缀的文件
find / -name *.sh或locate *.shfind 与locate的区别:locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称
- Shell入门
前言 日常用Python多一些,不过很多时候shell脚本更简单实用一些,所以有必要熟悉一下shell脚本.当然shell有他特定的一些场景,比方说我曾经改过一个vpn断线自动重连的脚本,简单实用. ...
- Linux sudo 命令的应用
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...