緣起:昨天官方開發有了更新v0.10.101100,Picker的mode屬性已經支持date以及time(background-image的bug也修復),于是來更新此實例。
如圖
官方文檔出處:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
步驟,在item.wxml文件中增加一個picker組件,如下:
如圖
從圖中可以看出:
1.日期后面是空白的,應該默認顯示今天日期; 2.點擊確定也沒有顯示到組件上,需要實現bindDateChange方法。
于是我們需要在item.js文件中,聲明一個data值date與wxml中的{{date}}綁定關聯
然后在onLoad中初始化字符串格式的日期值,詳細說明見注釋:
經過如上處理,日期組件已經顯示為當前日期
如圖
處理到此,我們還需要修復一個邏輯錯誤,即組件的結束日期應該不超過當日,做法也很簡單,只需要在wxml文件中對picker的日期屬性end由2017-09-01改為{{date}}即可
<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">
吐槽一下,官方的picker的還是有bug的,完全不聽start與end使喚,仍可以選任意日期,暫時不去理會,代碼就這么寫著,什么時候開發工具修復了自然可以了,畢竟是現在還只是內測,就將就用著。
接下來處理日期組件點擊確認事件bindDateChange
回到item.js文件
聲明一個bindDateChange方法,添加如下代碼以寫回data中的date值
至此,已經實現集成日期picker組件。剩下的就是將它同之前的標題、類型、金額字段那樣存在json再本地setStorage存儲即可,這里不作贅述