緣起：昨天官方開發有了更新v0.10.101100，Picker的mode屬性已經支持date以及time（background-image的bug也修複），於(yu) 是來更新此實例。

目標：實現集成日期組件

如圖

官方文檔出處：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步驟，在item.wxml文件中增加一個(ge) picker組件，如下：

如圖

從(cong) 圖中可以看出：

1.日期後麵是空白的，應該默認顯示今天日期； 2.點擊確定也沒有顯示到組件上，需要實現bindDateChange方法。

於(yu) 是我們(men) 需要在item.js文件中，聲明一個(ge) data值date與(yu) wxml中的{{date}}綁定關(guan) 聯

然後在onLoad中初始化字符串格式的日期值，詳細說明見注釋：

經過如上處理，日期組件已經顯示為(wei) 當前日期

如圖

處理到此，我們(men) 還需要修複一個(ge) 邏輯錯誤，即組件的結束日期應該不超過當日，做法也很簡單，隻需要在wxml文件中對picker的日期屬性end由2017-09-01改為(wei) {{date}}即可

<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">

吐槽一下，官方的picker的還是有bug的，完全不聽start與(yu) end使喚，仍可以選任意日期，暫時不去理會(hui) ，代碼就這麽(me) 寫(xie) 著，什麽(me) 時候開發工具修複了自然可以了，畢竟是現在還隻是內(nei) 測，就將就用著。

接下來處理日期組件點擊確認事件bindDateChange

回到item.js文件

聲明一個(ge) bindDateChange方法，添加如下代碼以寫(xie) 回data中的date值

至此，已經實現集成日期picker組件。剩下的就是將它同之前的標題、類型、金額字段那樣存在json再本地setStorage存儲(chu) 即可，這裏不作贅述