微信小程序日历组件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 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue组件之间的数据传递方法详解
Apr 19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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入门速成教程
2007/03/19 PHP
php以post形式发送xml的方法
2014/11/04 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python二分查找详解
2015/09/13 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python 随机按键模拟2小时
2020/12/30 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
社团成立邀请函
2014/01/08 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
表彰先进的通报
2014/01/31 职场文书
无犯罪记录证明
2014/09/19 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python