微信小程序之日期时间筛选器实现（支持年月日时分）

开发微信小程序过程中，有个需求需要用到

日期时间筛选器

，查看微信官方文档后，发现官方文档的picker筛选器只能单独支持日期或者是时间，所以为了实现需求自己参考企业微信封装了个日期时间筛选器组件。

写在前面！！！由于较多朋友有源码需求，我抽了个时间整理了一下代码，并对一年前的代码进行了升级和优化，并放在我github上，有需要的自取：

微信小程序日期时间选择器

原理

筛选器的实现，我参考的是小程序官方方式，通过半屏弹窗（mp-half-screen-dialog）结合picker_view进行日期、时间的选择，最终在选择时间后，通过事件触发返回一个change事件，其中参数值为毫秒级时间戳。需要注意的是，由于组件样式需要，对mp-half-screen-dialog做了一定的样式改造，并且为了不影响全局的mp-half-screen-dialog样式，使用指定的extClass进行样式控制，样式具体实现代码在app.wxss中。

实现

1.弹窗的显隐：

在组件的

properties

中传入一个

show

字段，用于控制弹窗的显隐；默认值为

false

。

2.开始时间，时间戳：

毫秒级时间戳，非必填，默认为，距现在一年前的时间。

3.结束时间，时间戳：

毫秒级时间戳，非必填，默认为，距现在一年后的时间。

具体思路

：整体思路是监听弹窗的显隐（show），当弹窗显示时，获取对应配置项（

类型、年、月

）计算对应筛选器的范围，并初始化默认日期时间为

当前年月日时分

。

以下是效果图以及具体代码实现：

在这里插入图片描述

wxml代码

<!--components/date-time-picker.wxml-->
<mp-half-screen-dialog show="{{ show }}" maskClosable="{{ false }}" closabled="{{ false }}" extClass="date-time-dialog" catchtouchmove="preventTouchMove" bindclose="bindclose">
  <view slot="desc" class="date-time-container">
    <view class="date-time-body">
      <!-- 日期 -->
      <view class="selector-panel selector-panel-date">
        <picker-view indicator-style="height: 55px;" mode="selector" value="{{ [dateIndex] }}" class="selector-picker" bindchange="dateChange" bindpickstart="bindpickstart" bindpickend="bindpickend">
          <picker-view-column>
            <view wx:for="{{ dateArr }}" wx:key="index" class="selector-item selector-item-date">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
      <!-- 小时 -->
      <view class="selector-panel">
        <picker-view indicator-style="height: 55px;" mode="selector" value="{{ [hourValue] }}" class="selector-picker" bindchange="hourChange" bindpickstart="bindpickstart" bindpickend="bindpickend">
          <picker-view-column>
            <view wx:for="{{ hourArr }}" wx:key="index" class="selector-item">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
      <!-- 分钟 -->
      <view class="selector-panel">
        <picker-view indicator-style="height: 55px;" mode="selector" value="{{ [minValue] }}" class="selector-picker" bindchange="minChange" bindpickstart="bindpickstart" bindpickend="bindpickend">
          <picker-view-column>
            <view wx:for="{{ minArr }}" wx:key="index" class="selector-item">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>

    <view class="date-time-oper">
      <button type="default" class="weui-btn oper-btn" bindtap="bindclose">取消</button>
      <button type="primary" class="weui-btn oper-btn" bindtap="handleSubmit" disabled="{{ disabled }}">确定</button>
    </view>
  </view>
</mp-half-screen-dialog>

js代码

const utils = require('../utils/util')
const yearTimestamp = 365 * 24 * 60 * 60 * 1000 // 一年

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false,
      observer: '_showChange'
    },
    // 开始时间，时间戳
    startTime: {
      type: Number,
      value: +new Date() - yearTimestamp  // 默认，一年前
    },
    // 结束时间，时间戳
    endTime: {
      type: Number,
      value: +new Date() + yearTimestamp  // 默认，一年后
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    disabled: false, // button disable态

    dateIndex: null,
    hourValue: '',
    minValue: '',
    dateArr: [],
    hourArr: [],
    minArr: [],

    activeTime: null // 抛出的时间戳
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _showChange (e) {
      if (e) {
        this.getDateTimeData()
        this.initData()
      }
    },

    handleSubmit () {
      this.bindclose()
      this.triggerEvent('change', { value: this.data.activeTime })
    },

    /**
     * 处理日期时间初始值
     */
    initData () {
      if (!this.data.activeTime) {
        const now = +new Date()
        if (now >= this.data.startTime && now <= this.data.endTime) {
          const index = this.data.dateArr.map(v => v.name).indexOf(utils.formatTime(now, '{m}月{d}日周{a}'))
          let tmp = this.data.dateArr
          tmp[index].name = '今天'

          this.setData({
            dateIndex: index,
            hourValue: utils.formatTime(now, '{h}'),
            minValue: utils.formatTime(now, '{i}'),
            dateArr: tmp,
            activeTime: now
          })
        }
      }
    },

    /**
     * 获取日期时间数据，思路：获取固定的小时、分钟数组，将开始时间、结束时间进行年月天对比，取其差值，从而形成对应日期数组
     */
    getDateTimeData () {
      const mins = []
      const hours = []
      let dates = []

      // 获取小时、分钟数组
      for (let i = 0; i < 60; i++) {
        mins.push(i.toString().length < 2 ? '0' + i : i.toString())
      }
      for (let j = 0; j < 24; j++) {
        hours.push(j.toString().length < 2 ? '0' + j : j.toString())
      }

      // 开始时间需小于结束时间
      if (this.data.startTime >= this.data.endTime) {
        console.log('error_params_not_valid')
        return
      }

      // 获取日期数组
      dates = this.getDateData()

      this.setData({
        hourArr: hours,
        minArr: mins,
        dateArr: dates
      })
    },

    getDateData () {
      const startDate = new Date(this.data.startTime)
      const endDate = new Date(this.data.endTime)
      const nowYear = new Date().getFullYear()
      const startYear = startDate.getFullYear()
      const endYear = endDate.getFullYear()
      const startMonth = startDate.getMonth()
      const endMonth = endDate.getMonth()
      const startDay = startDate.getDate()
      const endDay = endDate.getDate()

      const dateArr = []

      // 处理逻辑：判断年限是否相同；若同年则判断是否同月，同月则直接添加日期；不同月则从开始时间月份处理，同时处理月日边界问题；以此类推...
      let time = 0
      // 同年
      if (startYear === endYear) {
        // 同月
        if (startMonth === endMonth) {
          for (let day = startDay; day <= endDay; day++) {
            time = new Date(startYear, startMonth, day)
            dateArr.push({ name: startYear === nowYear ? utils.formatTime(time, '{m}月{d}日周{a}') : utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })
          }
        } else {
          // 不同月
          let tmpDay = startDay
          let lastMonth = endMonth
          for (let month = startMonth; month <= lastMonth; month++) {
            // 默认获取的月份方法得到月份值是0-11，该方法获取天数的月份值是1-12
            const days = month === lastMonth ? endDay : new Date(startYear, month + 1, 0).getDate()

            for (let day = tmpDay; day <= days; day++) {
              time = new Date(startYear, month, day)
              dateArr.push({ name: startYear === nowYear ? utils.formatTime(time, '{m}月{d}日周{a}') : utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })

              // 处理边界（日）
              day === days && (tmpDay = 1)
            }
          }
        }
      } else {
        // 不同年
        let tmpDay = startDay
        let tmpMonth = startMonth
        let lastMonth = 11

        for (let year = startYear; year <= endYear; year++) {
          for (let month = tmpMonth; month <= lastMonth; month++) {
            // 默认获取的月份方法得到月份值是0-11，该方法获取天数的月份值是1-12
            const days = (month === lastMonth && year === endYear) ? endDay : new Date(startYear, month + 1, 0).getDate()

            for (let day = tmpDay; day <= days; day++) {
              time = +new Date(year, month, day)
              dateArr.push({ name: year === nowYear ? utils.formatTime(time, '{m}月{d}日周{a}') : utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })

              // 处理边界（日）
              day === days && (tmpDay = 1)
            }

            // 处理边界（月）
            month === lastMonth && (tmpMonth = 0)
            month === lastMonth && year === endYear - 1 && (lastMonth = endMonth)
          }
        }
      }

      return dateArr
    },

    dateChange (e) {
      const day = this.data.dateArr[e.detail.value[0]]
      let time = day.value + (Number(this.data.hourValue) * 3600 + Number(this.data.minValue) * 60) * 1000
      this.setData({
        dateIndex: e.detail.value[0],
        activeTime: time
      })
    },

    hourChange (e) {
      const hour = Number(this.data.hourArr[e.detail.value[0]])
      let time = this.data.dateArr[this.data.dateIndex].value + (hour * 3600 + Number(this.data.minValue) * 60) * 1000
      this.setData({
        hourValue: this.data.hourArr[e.detail.value[0]],
        activeTime: time
      })
    },

    minChange (e) {
      const min = Number(this.data.minArr[e.detail.value[0]])
      let time = this.data.dateArr[this.data.dateIndex].value + (Number(this.data.hourValue) * 3600 + min * 60) * 1000
      this.setData({
        minValue: this.data.minArr[e.detail.value[0]],
        activeTime: time
      })
    },

    bindclose () {
      this.setData({
        show: false
      })
    },

    bindpickstart () {
      this.setData({
        disabled: true
      })
    },

    bindpickend () {
      this.setData({
        disabled: false
      })
    },

    preventTouchMove () {
      // 阻止半屏状态下 页面滑动
    }

  }
})

wxss代码

.date-time-container {
  min-height: 350px !important;
  display: flex;
  flex-direction: column;
}

.date-time-body {
  width: 100% !important;
  display: flex;
  flex: auto;
}

.date-time-oper {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector-panel {
  width: 80px;
  display: flex;
  align-items: center;
}
.selector-panel-date {
  flex: auto;
}

.selector-picker {
  width: 100%;
  height: 80%;
  font-size: 24px;
}

.selector-item {
  line-height: 50px !important;
  text-align: center;
}

.selector-item-date{
  font-size: 16px;
}

.oper-btn {
  width: 45% !important;
  height: 40px !important;
}

原文链接：https://blog.csdn.net/weixin_42371354/article/details/122500184

原理

实现

wxml代码

js代码

wxss代码

你可能也喜欢