微信小程序 - 公农历通用时间选择器组件

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

效果图

组件用法

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或扫码查看

至此结束

最后推荐一下我的小程序，我的纪念日小助手