本文實例講述了微信小程序使用picker實現時間和日期選擇框功能。分享給大家供大家參考,具體如下:
1、效果展示

2、關鍵代碼
① index.wxml
<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">  當前城市選擇:{{picker1Range[picker1Value]}}</picker><picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange"> 當前時間選擇: {{timeValue}}</picker><picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange"> 當前日期選擇: {{dateValue}}</picker>② index.js
Page({ data:{  // text:"這是一個頁面"  picker1Value:0,  picker1Range:['北京','上海','廣州','深圳'],  timeValue:'08:08',  dateValue:'2016-10-13' }, normalPickerBindchange:function(e){  this.setData({   picker1Value:e.detail.value  }) }, timePickerBindchange:function(e){  this.setData({   timeValue:e.detail.value  }) }, datePickerBindchange:function(e){  this.setData({   dateValue:e.detail.value  }) }})3、源代碼點擊此處本站下載。
關于picker組件的詳細介紹可參考官網:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答