微信小程序-時間picker(怎樣設置起始時間小於結束時間,並篩選出在此時間範圍的數據)

在小程序的開發,會遇到時間選擇器,來供咱們選擇起始時間和結束時間.

 

以此來篩選數據,獲得該時間範圍內的數據.

 

首先作一個時間彈窗,用hidden來控制是否顯示.

我直接用.wpy後綴

<view class="weui-cells timePicker" hidden="{{timeBoxHidden}}" style="height:240rpx;">

　　<view class="weui-cell" style="">

       　　<picker mode="date" value="{{dateStart}}" end="{{dateEnd}}" bindchange="bindDateStartChange">

　　　　　　<text space='nbsp'> 開始時間 {{dateStart}}></text>

　　　　</picker>

　　</view>

　　<view class="weui-cell" style="height:70rpx;">

　　　　<picker mode="date" value="{{dateEnd}}" start="{{dateStart}}" end="2018-10-10" bindchange="bindDateEndChange">

　　　　　　<text space='nbsp'> 結束時間 {{dateEnd}}></text>

　　　　</picker>

　　</view>

　　<view class="weui-cell" >

　　　　<button class="weui-btn weui-btn_primary" bindtap="cancelTime">重置</button>

　　　　<button class="weui-btn weui-btn_primaryTwo" bindtap="sureTime">肯定</button>

　　</view>

</view>

 

js中去綁定數據

data = {

  dateStart: '2018-09-10',

  dateEnd: '2018-09-12',

  articles: [ ] 

}

 

若是想靠起始時間和結束時間來篩選數據

 

我試過在起始時間和結束時間綁定的事件中去調用接口,後來發現只能篩選除大於起始時間和小於結束時間的

 

而不能獲得其中間的數據.

 

後來通過嘗試,便在肯定綁定事件中去調用該接口.

 

sureTime(e) {

　　this.timeBoxHidden = true

　　this.fetch({

　　url:' ',

　　success: (data)=> {

　　　　let arr = []

　　　　data.datas.forEach((item) => {

　　　　if(item.applyTime >= this.dateStart && item.applyTime <= this.dateEnd ) {

　　　　arr.push(item)

　　}

})  

     //article 列表渲染的數據數組

　　this.articles = arr

　　}

})

　　this.scrollToUpper()

},

 

調用接口,我使用的是封裝的fetchAPI ,你們庫使用微信小程序自己的wx.request({}) 去獲取接口

 

這樣便就完成了,時間選擇器的一些操做