微信小程序-时间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({}) 去获取接口

 

这样便就完成了,时间选择器的一些操作