微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能【附源碼下載】
更新時(shí)間：2017年12月11日 08:57:49 作者：FutrueJet
這篇文章主要介紹了微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能,結(jié)合實(shí)例形式分析了微信小程序picker組件進(jìn)行日期與時(shí)間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實(shí)例講述了微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
① index.wxml
<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">
當(dāng)前城市選擇：{{picker1Range[picker1Value]}}
</picker>
<picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">
當(dāng)前時(shí)間選擇: {{timeValue}}
</picker>
<picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
當(dāng)前日期選擇: {{dateValue}}
</picker>
② index.js
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
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、源代碼點(diǎn)擊此處本站下載。
關(guān)于picker組件的詳細(xì)介紹可參考官網(wǎng)：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
匹配html標(biāo)記的正則...2006-07-07
js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)
本文主要介紹了js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本文主要介紹了tab欄切換的原理以及實(shí)現(xiàn)方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Elasticsearch實(shí)現(xiàn)復(fù)合查詢高亮結(jié)果功能
這篇文章主要介紹了Elasticsearch實(shí)現(xiàn)復(fù)合查詢,高亮結(jié)果功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了javascript繼承體系的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了ES6中Proxy代理用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Proxy代理的概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
Js中安全獲取Object深層對(duì)象的方法實(shí)例
Object是JavaScript基本數(shù)據(jù)類型之一（function也屬于object，是特殊的object）,其存儲(chǔ)于堆中,這篇文章主要給大家介紹了關(guān)于Js中安全獲取Object深層對(duì)象的相關(guān)資料,需要的朋友可以參考下2021-09-09
js中.sort()函數(shù)的常見用法與高級(jí)操作
JavaScript中的sort函數(shù)可以用來對(duì)數(shù)組進(jìn)行排序,默認(rèn)情況下sort函數(shù)將數(shù)組中的元素轉(zhuǎn)換為字符串,并按照Unicode碼點(diǎn)的順序進(jìn)行排序,下面這篇文章主要給大家介紹了關(guān)于js中.sort()函數(shù)的常見用法與高級(jí)操作的相關(guān)資料,需要的朋友可以參考下2023-05-05
Three.js中如何使用CSS3DRenderer和CSS3DSprite實(shí)現(xiàn)模型標(biāo)簽文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以輕松地實(shí)現(xiàn)模型標(biāo)簽文字的效果,為場(chǎng)景中的模型提供更直觀的信息展示,本文將介紹如何使用這兩個(gè)工具來實(shí)現(xiàn)模型標(biāo)簽文字,并提供相應(yīng)的代碼示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了詳解如何快速配置webpack多入口腳手架，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12