GitHub Demo 地址:
jh-weapp-demo實現(xiàn)一些常用效果医吊、封裝通用組件和工具類
序
最近做了個小程序，需要用到支持公農(nóng)歷的通用時間選擇器唱捣，找了一圈沒有現(xiàn)成的舶胀，只能自己擼一個概说，最終有了這個組件
jh-lunar-picker
其中公農(nóng)歷互轉(zhuǎn)的庫使用的是jonline/calendar.js
支持功能
- 公歷和農(nóng)歷切換同步
- 設(shè)置默認(rèn)選中時間
- 設(shè)置默認(rèn)展示公歷或農(nóng)歷
- 設(shè)置最小時間（公歷），支持 1901/01/01 | 1901-01-01 | 1901年01月01日
- 設(shè)置最大時間（公歷）嚣伐，支持 2100/12/31 | 2100-12-31 | 2100年12月31日
- 標(biāo)題欄顏色
注：
默認(rèn)最大最小范圍：公歷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 添加組件
默認(rèn)效果
<jh-lunar-picker isShow='{{isShowTimePicker}}' bind:confirm="onConfirm" />
設(shè)置默認(rèn)選中時間
<jh-lunar-picker isShow='{{isShowTimePicker2}}' selectTime="{{normalSelectTime}}" bind:confirm="onConfirm" />
設(shè)置默認(rèn)展示農(nóng)歷選擇器
<jh-lunar-picker isShow='{{isShowTimePicker3}}' isLunar bind:confirm="onConfirm" />
設(shè)置最小時間（按公歷設(shè)置）
<jh-lunar-picker isShow='{{isShowTimePicker4}}' minTime="{{minTime}}" bind:confirm="onConfirm" />
設(shè)置最大時間（按公歷設(shè)置）
<jh-lunar-picker isShow='{{isShowTimePicker5}}' maxTime="{{maxTime}}" bind:confirm="onConfirm" />
設(shè)置標(biāo)題欄顏色
<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
})
}
返回參數(shù)說明
返回的是一個對象，一共三個字段
time：選中的公歷時間轩端，格式：2019/02/02放典，根據(jù)需要自己轉(zhuǎn)換處理
timeStamp：選中的公歷時間戳，根據(jù)需要自己轉(zhuǎn)換處理
timeObject：選中的公農(nóng)歷時間對象
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": "水瓶座"
}
具體實現(xiàn)和示例請看github
至此結(jié)束
