找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序日历组件

[复制链接]
查看: 799|回复: 6
最佳答案
0 

5

主题

5

帖子

90

积分

新人求带

积分
90
 楼主| 发表于 2017-6-8 14:10:34 | 显示全部楼层 |阅读模式
微信小程序日历组件-calendar

原生的日期选择器picker只支持公历,于是采用picker-view自定义了一个组件,可以支持农历。

模版使用:
  1. <import src="../cal/calendar.wxml"></import>
  2. <!--index.wxml-->
  3. <template is="calendar" data="{{...calendar_data}}"></template>
复制代码

JS代码使用:
  1. var Calendar = require('../cal/calendar');

  2. Page({
  3.   data: {
  4.     calendar_data: {}
  5.   },
  6.   ....
  7.   
  8.   var calendar = new Calendar(this, function(date){
  9.       // 指定选择器回调函数
  10.       that.setData({
  11.           date: date.name
  12.       })
  13.   });
  14.   
  15.   /*return {
  16.     day:6,
  17.     month:6
  18.     name:"2017年6月6日"
  19.     type:1 // 1:公历,2:农历
  20.     year:2017
  21.   }*/
  22.   // 返回当前选择时间
  23.   var currentDate = calendar.getCurrentSelectDate();
  24.   console.log(currentDate)
复制代码

样式
  1. .calendar{
  2.     position: absolute;
  3.     bottom: 0;
  4.     width: 100%;
  5.     z-index: 999;
  6.     background-color: #fff;
  7. }
  8. .tab{
  9.     display:inline-block;
  10.     width:50%;
  11.     text-align:center;
  12.     font-size:16px;
  13.     color: #ccc;
  14. }
  15. .tab-bar{
  16.     background-color: #eee;
  17.     height: 40px;
  18.     line-height: 40px;
  19. }
  20. .tab-bar .active{
  21.     color: #000;
  22. }
  23. .selected-item{
  24.     font-size: 28px;

  25. .event-type_parent{
  26.     font-size: 14px;
  27. }
  28. .event-type_child{
  29.     text-align: center;
  30.     line-height: 30px;
  31. }

  32. .event-type_txt{
  33.     display: inline-block;
  34. }
复制代码

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

图片示例
2e706e67.png

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

44

积分

新人求带

积分
44
发表于 2017-6-10 10:54:54 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

6

帖子

196

积分

新人求带

积分
196
发表于 2017-6-12 11:45:02 | 显示全部楼层
开始学习啊啊啊啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

36

帖子

394

积分

略知一二

积分
394
发表于 2017-6-30 11:47:13 | 显示全部楼层
谢谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

74

帖子

136

积分

新人求带

积分
136
发表于 2017-9-9 21:38:31 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

65

帖子

189

积分

新人求带

积分
189
发表于 2017-9-13 23:21:36 | 显示全部楼层
DVBXZDGVXVX
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

250

帖子

328

积分

略知一二

积分
328
发表于 2017-9-20 01:00:57 | 显示全部楼层
这个小工具不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com