微信小程序组件 时间搜索

江湖规矩！先上效果图👇 效果图

是粗糙了一些嗷不过实现功能比较重要嘿~

首先，在根目录下新建一个文件夹，专门放置组件内容。该文件夹下再新建文件夹，放置我们写好的时间搜索的内容。

文件位置

组件内容涉及到picker的使用，用微信小程序自带的也可以，vant组件库里也可以。不过个人感觉小程序自带的比较好用，直接操作就行，不用操作像vant组件库里那么多的方法。。点击展开picker，选择时间，确认时间。。就很烦哈哈哈哈哈哈

timeFilter.wxml文件内容：（startTime为起始日期，endTime为结束日期。picker内的截至日期end默认为当前日期。）

<view class="search_round">
  <view class="time">

    <picker mode="date" value="{{startTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="start">
      <view class="start">
        {{ startTime }}
      </view>
    </picker>

    <view class="line">——</view>

    <picker mode="date" value="{{endTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="end">
      <view class="end">
        {{ endTime }}
      </view>
    </picker>

  </view>

  <view class="search" bindtap="_handleFilter">
    <van-icon name="search" size="24" color="lightgrey" />
  </view>

</view>

timeFilter.wxss文件内容：

.search_round{
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
  border-radius: 50px;
  background: #fff;
  font-size: 26rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 4rpx;
  padding-left: 20rpx;
}

.search_round .time {
  color: #868383;
  flex: 7;

  display: flex;
  align-items: center;
  justify-content: space-around;
}
.search_round .search {
  flex: 1;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

timeFilter.json文件内容：

{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}

timeFilter.js文件内容：

// pages/common/timeFilter.js
Component({
  lifetimes: {
    // 组件的生命周期函数。进入页面即获取当前日期
    attached: function () {
      this.getTime();
    }
  },
  /**
   * 组件的属性列表：在父组件中可能会进行操作的变量设置在properties里
   */
  properties: {
    startTime: {
      type: String,
      value: ""
    },
    endTime: {
      type: String,
      value: ""
    },
  },

  /**
   * 组件的初始数据：父组件中不会发生改变的变量设置在data里
   */
  data: {
    timeType: "",
    currentDate: ""
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getTime() {
      // 获取当前日期
      let date = new Date();
      // 格式化当前日期
      let year = date.getFullYear();
      let agoMonth = date.getMonth();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      // 补零儿
      agoMonth = agoMonth <= 9 ? `0${agoMonth}` : agoMonth;
      month = month <= 9 ? `0${month}` : month;
      day = day <= 9 ? `0${day}` : day;

      let endTime = `${year}-${month}-${day}`;
      let startTime = `${year}-${agoMonth}-${day}`;
      // 赋值
      this.setData({
        endTime,
        startTime,
        currentDate: endTime
      })
    },
    bindDateChange(e) {
      // 取值
      let value = e.detail.value;
      // 两个日期用了同一个方法，所以另外设置一个参数来做区分
      let timeType = e.currentTarget.dataset.msg;
      // 起始日期赋值
      if (timeType == 'start') {
        this.setData({
          startTime: value
        })
      }
      // 结束日期赋值
      if (timeType == "end") {
        this.setData({
          endTime: value
        })
      }
    },
    // 点击搜索图表进行的操作
    _handleFilter() {
      let startTime = new Date(this.data.startTime).getTime();
      let endTime = new Date(this.data.endTime).getTime();
      // 起始日期不能超过结束日期的拦截
      if (startTime > endTime) {
        wx.showToast({
          title: "请选择正确时间区间",
          icon: "none",
          duration: 2000
        })
        return;
      }
      // 这个我菜鸡讲不清楚。。。。官方文档里有解释。。还可以进行更多设置。。尼萌自己去看哈哈哈哈
      this.triggerEvent("handleFilter");
    }
  }
})

组件内容就是这些👆，以下是父组件中的设置。
父组件.json配置：↓

{
  "usingComponents": {
    "time-filter": "../../../components/timeFilter/timeFilter"
  },
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "时间检索",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

父组件.wxml：（最好在引入的timeFilter外面再套个容器，将来在父组件中方便设置样式）

  <view class="time-container">
    <time-filter id="filter" startTime="{{startTime}}" endTime="{{endTime}}" bind:handleFilter="_handleFilter"></time-filter>
  </view>

父组件中的样式就不上了，只在time-container设置了一个宽度，和居中~

父组件.js中需要进行三个操作。
1.（需要为起始日期和结束日期提前赋值的话才进行这一步）在data中设置变量，与子组件双花括号内的名称一致

Page({
  data {
    startTime: "",
    endTime:""
  }
})

2.生命周期函数onShow中 ↓（这里的id需要和上面的id对应）

  onShow() {
    this.timeFilter = this.selectComponent('#filter');
  },

3.子组件内的方法使用↓

  _handleFilter() {
  // 这里，实不相瞒，该干嘛就干嘛了哈哈哈需要传值的传值，调接口的调接口
  // 需要取值的语法
    let start = this.timeFilter.data.startTime;
    let end = this.timeFilter.data.endTime;
    console.log(start,"start");
    console.log(end,"end");
  },

tada~_{一个时间检索的组件就完成啦}