GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

序

最近做了个小程序，需要用到支持公农历的通用时间选择器，找了一圈没有现成的，只能自己撸一个，最终有了这个组件jh-lunar-picker
其中公农历互转的库使用的是jonline/calendar.js

支持功能

• 公历和农历切换同步
• 设置默认选中时间
• 设置默认展示公历或农历
• 设置最小时间（公历），支持 1901/01/01 | 1901-01-01 | 1901年01月01日
• 设置最大时间（公历），支持 2100/12/31 | 2100-12-31 | 2100年12月31日
• 标题栏颜色

注：
默认最大最小范围：公历1901/01/01 ~ 2100/12/31

效果图

lunarTimePicker.gif lunarTimePicker1.png lunarTimePicker2.png lunarTimePicker3.png

组件用法

1. 引用组件

    "jh-lunar-picker": "jh-components/jh-lunar-picker/index",

2. wxml 添加组件

默认效果

 <jh-lunar-picker isShow='{{isShowTimePicker}}' bind:confirm="onConfirm" />

设置默认选中时间

<jh-lunar-picker isShow='{{isShowTimePicker2}}' selectTime="{{normalSelectTime}}" bind:confirm="onConfirm" />

设置默认展示农历选择器

<jh-lunar-picker isShow='{{isShowTimePicker3}}' isLunar bind:confirm="onConfirm" />

设置最小时间（按公历设置）

<jh-lunar-picker isShow='{{isShowTimePicker4}}' minTime="{{minTime}}" bind:confirm="onConfirm" />

设置最大时间（按公历设置）

<jh-lunar-picker isShow='{{isShowTimePicker5}}' maxTime="{{maxTime}}" bind:confirm="onConfirm" />

设置标题栏颜色

<jh-lunar-picker isShow='{{isShowTimePicker6}}' titleColor="#ee0a24" bind:confirm="onConfirm" />

3. js 弹出选择器

  this.setData({
    isShowTimePicker: true
  });

4. 点击选择器的 确定按钮，获取选择时间

  // 点击选择器的 确定按钮
  onConfirm(e) {
    let dict = e.detail
    console.log(dict)
    this.setData({
      time: dict.time,
      timeStamp: dict.timeStamp,
      timeObject: dict.timeObject
    })
  }

返回参数说明

返回的是一个对象，一共三个字段
time：选中的公历时间，格式：2019/02/02，根据需要自己转换处理
timeStamp：选中的公历时间戳，根据需要自己转换处理
timeObject：选中的公农历时间对象

timeObject具体字段

{
  "date": "2019-2-2",
  "lunarDate": "2018-12-28",
  "festival": null,
  "lunarFestival": null,
  "lYear": 2018,
  "lMonth": 12,
  "lDay": 28,
  "Animal": "狗",
  "IMonthCn": "腊月",
  "IDayCn": "廿八",
  "cYear": 2019,
  "cMonth": 2,
  "cDay": 2,
  "gzYear": "戊戌",
  "gzMonth": "乙丑",
  "gzDay": "庚午",
  "isToday": false,
  "isLeap": false,
  "nWeek": 6,
  "ncWeek": "星期六",
  "isTerm": false,
  "Term": null,
  "astro": "水瓶座"
}

具体实现和示例请看github

至此结束