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

至此结束

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

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

微信小程序 vant 封装DatetimePicker时间选择器
效果: 1.在components文件下新建dateTimePicker文件在index.wxml文件中编写: <view class="container" bindta ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
微信小程序获取当前系统时间以及判断周几
微信小程序获取当前系统时间以及判断周几首先获取当前日期在utils文件加中创建问价util.js function formatTime(date) {var year = date.getFul ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序56个民族数组选择器
微信小程序56个民族数组选择器 wxml部份: <view class="section"><picker bindchange="bindPicker ...
微信小程序根据日期和时间进行排序
一.前言最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助. 二.需求分析(这是已完成 ...
微信小程序解决ios端时间格式兼容的问题
微信小程序获取当时时间new Date时,会在ios真机上出现问题,具体表现为时间格式会报错并显示出NaN.这个bug并不会在模拟器和安卓系统出现,只会在ios系统上出现,具体原因是ios不支持符号 ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...

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

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

小程序码

序

支持功能

效果图

组件用法

1. 引用组件

2. wxml 添加组件

3. js 弹出选择器

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

返回参数说明

timeObject具体字段

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

最新文章

热门文章

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

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

小程序码

序

支持功能

效果图

组件用法

1. 引用组件

2. wxml 添加组件

3. js 弹出选择器

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

返回参数说明

timeObject具体字段

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

最新文章

热门文章

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

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