微信小程序使用picker實現(xiàn)時間和日期選擇框功能【附源碼下載】
更新時間:2017年12月11日 08:57:49 作者:FutrueJet
這篇文章主要介紹了微信小程序使用picker實現(xiàn)時間和日期選擇框功能,結合實例形式分析了微信小程序picker組件進行日期與時間選擇的相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了微信小程序使用picker實現(xiàn)時間和日期選擇框功能。分享給大家供大家參考,具體如下:
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組件的詳細介紹可參考官網(wǎng):https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
JavaScript頁面模板庫handlebars的簡單用法
本文主要是給大家分享的一個javascript頁面模板庫Handlebars的簡單用法,可以幫助大家輕松的構建語義化模板,非常的實用,推薦給大家。2015-03-03
js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下2014-04-04

