微信小程序时间筛选功能

功能：通过输入时间段，筛选数据
UI 组件库： Wux Weapp,Vant Weapp 下拉框使用的是vant ，时间选择器使用的wux ，之所以混合使用，可能是宝宝我没有仔细找到一个组件库可以同时满足两个操作的.
预览图：

代码如下：

// pages/xxx/xxxxx.js

var app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    lang: 'zh_CN',
    startDate: "",
    endDate: "",
    startDateDisplay: "请选择",  // 选择框未选择时间时显示的数据
    endDateDisplay: "请选择",  // 同上
    minDate: "2018-01-01", // 时间选择的起始时间
    startDateStamp: app.getTimeStamp(),  // 设置默认时间为当前时间戳，该方法在app.js中定义了，方法就是js获取当前时间戳，不会请百度。
    endDateStamp: app.getTimeStamp(),
    indexList: []
  },
// 选择时间后的回调方法
  onConfirm(e) {

    var that = this
    let data = e.detail
    const {
      tag,
      mode
    } = e.currentTarget.dataset
    let displayTag = `${tag}Display`
    let stamp = `${tag}Stamp`
    that.setData({   // 将选择的时间返回的页面显示
      [tag]: data.value,
      [displayTag]: data.label,
      [stamp]: data.date

    })
    console.log(`onConfirm${tag}`, data, that.data)
  },

  onSubmit(e) { // 点击确定后的回调函数
    var that = this
    let data = e.currentTarget.dataset
    let startStamp = data.startdatestamp
    let endStamp = data.enddatestamp
    let deviceId = data.deviceid
    // 通过返回的时间调取服务器api，得到想要的数据
    app.request(`/picture-data/group?deviceId=${deviceId}&endTimestamp=${endStamp}&pageNumber=1&pageSize=100&startTimestamp=${startStamp}`).then(function(res) {
      that.setData({
        imgList: res
      })
      that.selectComponent('#item').toggle(); // 点击确定后下拉框隐藏
    })
  }

})

//xxx.json

"usingComponents": {
    "van-popup": "/static/youzan/popup/index",
    "van-cell": "/static/youzan/cell/index",
    "van-dropdown-menu": "/static/youzan/dropdown-menu/index",
    "van-dropdown-item": "/static/youzan/dropdown-item/index",
    "van-button": "/static/youzan/button/index",
    "van-action-sheet": "/static/youzan/action-sheet/index",
    "wux-segmented-control": "/static/wux/segmented-control/index",
    "wux-date-picker": "/static/wux/date-picker/index",
    "wux-cell-group": "/static/wux/cell-group/index",
    "wux-cell": "/static/wux/cell/index",
    "wux-button": "/static/wux/button/index"
  }

  
    
      
    
    
      
    

    
      确定
    
  




  

    
      
        
          
        
      
    

  

---

大概就是这样，如果有疑问的欢迎提问，希望可以帮到看到的宝宝们。