微信小程序日历组件calendar详解及实例


Posted in Javascript onJune 08, 2017

微信小程序日历组件calendar详解及实例

微信小程序日历组件calendar详解及实例

模版使用:

src="../cal/calendar.wxml">
 is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l
unar_selected_value}}">

JS代码使用:

var Calendar = require('../cal/calendar');
 Page({
 data: {
  selected_value: [],
  days: [],
  month: [],
  years: [],
  lunar_years: [],
  lunar_month: [],
  lunar_days: [],
  selectDateType: 1,
  lunar_selected_value: []
 },
 ....
 // 指定选择器回调函数
 new Calendar('key', this, function(date){
   that.setData({
     date: date
   })
 });

样式

.calendar{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff; 
}
.tab{
  display:inline-block;
  width:50%;
  text-align:center;
  font-size:16px;
  color: #ccc;
}
.tab-bar{
  background-color: #eee;
  height: 40px;
  line-height: 40px;
}
.tab-bar .active{
  color: #000;
}
.selected-item{
  font-size: 28px;
}
.event-type_parent{
  font-size: 14px;
}
.event-type_child{
  text-align: center;
  line-height: 30px;
}
.event-type_txt{
  display: inline-block;
}

以上用法看不懂的话,具体就参考代码里面index目录下。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
php简单数据库操作类的封装
Jun 08 #Javascript
ReactJs设置css样式的方法
Jun 08 #Javascript
requirejs按需加载angularjs文件实例
Jun 08 #Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 #Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 #Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
原生JS发送异步数据请求
Jun 08 #Javascript
You might like
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP 加密解密内部算法
2010/04/22 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
浅谈PHP封装CURL
2019/03/06 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
javascript常用函数(2)
2015/11/05 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Python中的全局变量如何理解
2020/06/04 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
企业军训感言
2014/02/08 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers