小程序时间筛选

 

html

 <!-- 筛选器 -->
    <view class="select_control">
        <picker mode="date" value="{{date}}" bindchange="bindDateStart">
            <view class="picker">
                <input type="text" placeholder="起始时间" value="{{dateStart}}" class="picker_start" disabled />
                <!-- <text class="picker_start">{{dateStart}}</text> -->
            </view>
        </picker>
        <text class="to">至</text>
        <picker mode="date" value="{{date}}" bindchange="bindDateEnd" start="{{dateStart}}">
            <view class="picker">
                <input type="text" disabled placeholder="结束时间" value="{{dateEnd}}" class="picker_start" readonly />
            </view>
        </picker>
        <view class="search">
            <icon type="search" size="20" bind:tap="onsearch" />
        </view>
    </view>

js:

 data: {
    dateStart: '',
    dateEnd: '',
    orderList: [
      {
        name: '李四',
        date: '2019-02-15',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '取消',
        cause: '下雨天不想去'
      },
      {
        name: '张三',
        date: '2019-09-15',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '取消',
        cause: '行程有变'
      }, {
        name: '王五',
        date: '2019-06-18',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '未完成'
      }
    ],
    allList: [
      {
        name: '李四',
        date: '2019-02-15',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '取消',
        cause: '下雨天不想去'
      },
      {
        name: '张三',
        date: '2019-09-15',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '取消',
        cause: '行程有变'
      }, {
        name: '王五',
        date: '2019-06-18',
        orderStart: '罗湖',
        orderEnd: '尖沙咀',
        status: '未完成'
      }
    ]
  },

 bindDateStart: function (e) {
    this.setData({
      dateStart: e.detail.value
    })
  },
  bindDateEnd(e) {
    this.setData({
      dateEnd: e.detail.value
    })
  },
  onsearch() {//筛选
    let data = this.data;
    if (!data.dateStart || !data.dateEnd) {
      showToast('请选择时间区间!')
      return;
    } else if (data.dateStart > data.dateEnd) {
      showToast('起始时间不能大于结束时间!')
      return;
    }
    const stime = new Date(data.dateStart).getTime();
    const etime = new Date(data.dateEnd).getTime();
    let allTableData = data.allList.filter(item => {
      let date = new Date(item.date);
      let time = date.getTime();
      return time >= stime && time <= etime;
    });
    console.log(allTableData)

    if (!allTableData.length) {
      showToast('暂无数据!')
      this.setData({
        orderList: allTableData
      })
      return;
    } this.setData({
      orderList: allTableData
    })

  },

代码地址:https://download.csdn.net/download/qq_40190624/11257809