您好,登錄后才能下訂單哦!
今天小編給大家分享一下小程序日期時(shí)間選擇器怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
要用到picker組件,動(dòng)畫(huà)從底部彈起的滾動(dòng)選擇器,現(xiàn)支持三種選擇器,通過(guò)mode來(lái)區(qū)分,分別是普通選擇器,時(shí)間選擇器,日期選擇器,默認(rèn)是普通選擇器。
看下相應(yīng)的屬性:
?、倨胀ㄟx擇器
選擇器用mode來(lái)區(qū)別,默認(rèn)是普通選擇器,e.detail.value拿到的值是選擇了項(xiàng)的索引index,再通過(guò)array拿到值.在data里面做初始化的時(shí)候,將備選項(xiàng)加入array即可.
選擇時(shí)觸發(fā)bindPickerChange事件,獲取index.
?、跁r(shí)間選擇器
mode = time時(shí),是時(shí)間選擇器.start,end分別是有效時(shí)間范圍的開(kāi)始和結(jié)束.格式hh:mm
選擇時(shí)觸發(fā)bindTimeChange事件,獲取time.
?、廴掌谶x擇器
mode = date時(shí),是時(shí)間選擇器.start,end分別是有效日期范圍的開(kāi)始和結(jié)束.格式y(tǒng)yyy-MM-dd
選擇時(shí)觸發(fā)bindDateChange事件,獲取date
具體的來(lái)看看代碼,布局:
<view class="section" > <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector"> <view class="picker"> 國(guó)家:{{objectArray[index]}} </view> </picker> </view> <view class="section"> <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange"> <view class="picker"> 時(shí)間 : {{times}}</view> </picker> </view> <view class="section"> <picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange"> <view class="picker"> 日期: {{dates}} </view> </picker> </view>
css樣式:
.section{ background:#CABBC7; margin:20rpx; padding:20rpxjs代碼:
Page({ data: { dates: '2016-11-08', times: '12:00', objectArray: ['中國(guó)', '英國(guó)', '美國(guó)'], index: 0, }, // 點(diǎn)擊時(shí)間組件確定事件 bindTimeChange: function (e) {console.log("誰(shuí)哦按") this.setData({ times: e.detail.value}) }, // 點(diǎn)擊日期組件確定事件 bindDateChange: function (e) { console.log(e.detail.value) this.setData({ dates: e.detail.value}) }, // 點(diǎn)擊城市組件確定事件 bindPickerChange: function (e) { console.log(e.detail.value) this.setData({ index: e.detail.value}) }
代碼很簡(jiǎn)單,分別綁定事件,點(diǎn)擊切換就Ok。
以上就是“小程序日期時(shí)間選擇器怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。