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

开发微信小程序过程中，有个需求需要用到日期时间筛选器，查看微信官方文档后，发现官方文档的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.dateArrtmp[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 = startDaylet lastMonth = endMonthfor (let month = startMonth; month <= lastMonth; month++) {// 默认获取的月份方法得到月份值是0-11，该方法获取天数的月份值是1-12const 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 = startDaylet tmpMonth = startMonthlet lastMonth = 11for (let year = startYear; year <= endYear; year++) {for (let month = tmpMonth; month <= lastMonth; month++) {// 默认获取的月份方法得到月份值是0-11，该方法获取天数的月份值是1-12const 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) * 1000this.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) * 1000this.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) * 1000this.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;
}