用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序日历组件-calendar

Rolan 2017-5-31 17:36

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


模版使用:

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

JS代码使用:

  1. var Calendar = require('../cal/calendar');
  2. Page({
  3. data: {
  4. selected_value: [],
  5. days: [],
  6. month: [],
  7. years: [],
  8. lunar_years: [],
  9. lunar_month: [],
  10. lunar_days: [],
  11. selectDateType: 1,
  12. lunar_selected_value: []
  13. },
  14. ....
  15. // 指定选择器回调函数
  16. new Calendar('key', this, function(date){
  17. that.setData({
  18. date: date
  19. })
  20. });

样式

  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. }
  26. .event-type_parent{
  27. font-size: 14px;
  28. }
  29. .event-type_child{
  30. text-align: center;
  31. line-height: 30px;
  32. }
  33. .event-type_txt{
  34. display: inline-block;
  35. }

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


鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: iamaddy

相关阅读

查看全部评论>>