微信小程序实现日期时间筛选器

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

筛选器的实现，我参考的是小程序官方方式，通过半屏弹窗（mp-half-screen-dialog）结合picker_view进行日期、时间的选择，最终在选择时间后，通过事件触发返回一个change事件，其中参数值为毫秒级时间戳。
实现

1.弹窗的显隐：
在组件的 properties 中传入一个 show 字段，用于控制弹窗的显隐；默认值为 false。
2.筛选器类型：
为了更好的兼容性，提供一个 type 字段，用于控制筛选器的所支持 可选择日期 的走向（往前、往后、前后都支持）；默认值为 center（前后都支持）。
3.时间区间（年）：
year 字段用于控制筛选器的年维度时间区间范围；默认值为 1。
4.时间区间（月）：
month 字段用于控制筛选器的月维度时间区间范围。默认值为 ‘undefined’****（声明’month’ 不为undefined时 year失效）。
具体思路：整体思路是监听弹窗的显隐（show），当弹窗显示时，获取对应配置项（类型、年、月）计算对应筛选器的范围，并初始化默认日期时间为当前年月日时分。
以下是效果图以及具体代码实现：

wxml代码

1. <mp-half-screen-dialog show="{{ show }}" maskClosable="{{ true }}" closabled="{{ false }}" extClass="f-date-dialog" catchtouchmove="preventTouchMove" bindclose="bindclose">
2. <view slot="desc" class="flex column full-width full-height">
3.   <view class="bd flex full-width">
4.    <!-- 日期 -->
5.    <view class="flex1 flex column align-items-center">
6.     <picker-view indicator-style="height: 50px;" mode="selector" value="{{ [dateIndex] }}" class="selector__picker" bindchange="dateChange">
7.      <picker-view-column>
8.       <view wx:for="{{ dateArr }}" wx:key="index" style="line-height: 50px" class="text-center {{ item.name.length < 10 ? 'h4' : 'h6' }}">{{ item.name }}</view>
9.      </picker-view-column>
10.     </picker-view>
11.    </view>
12.    <!-- 小时 -->
13.    <view class="flex1 flex column align-items-center">
14.     <picker-view indicator-style="height: 50px;" mode="selector" value="{{ [hourValue] }}" class="selector__picker" bindchange="hourChange">
15.      <picker-view-column>
16.       <view wx:for="{{ hourArr }}" wx:key="index" style="line-height: 50px" class="text-center">{{ item }}</view>
17.      </picker-view-column>
18.     </picker-view>
19.    </view>
20.    <!-- 分钟 -->
21.    <view class="flex1 flex column align-items-center">
22.     <picker-view indicator-style="height: 50px;" mode="selector" value="{{ [minValue] }}" class="selector__picker" bindchange="minChange">
23.      <picker-view-column>
24.       <view wx:for="{{ minArr }}" wx:key="index" style="line-height: 50px" class="text-center">{{ item }}</view>
25.      </picker-view-column>
26.     </picker-view>
27.    </view>
28.   </view>
30.   <view class="ft flex align-items-center justify-content-space-between">
31.    <button type="default" style="width:45%;height: 40px;" class="weui-btn" bindtap="bindclose">取消</button>
32.    <button type="primary" style="width:45%;height: 40px;margin-top:0" class="weui-btn" bindtap="handleSubmit">确定</button>
33.   </view>
34. </view>
35. </mp-half-screen-dialog>

复制代码

js代码

1. const utils = require('../../utils/util')
3. Component({
4. options: {
5.   addGlobalClass: true
6. },
8. properties: {
9.   show: {
10.    type: Boolean,
11.    value: false,
12.    observer: '_showChange'
13.   },
14.   type: {
15.    type: String,
16.    value: 'center' // 类型：'left' -- 现在往前  'center' -- 往前&往后  'right' -- 现在往后
17.   },
18.   year: {
19.    type: Number,
20.    value: 1 // '时间区间{year}年' month不为undefined时该项失效
21.   },
22.   month: {
23.    type: [Number, String],
24.    value: 'undefined' // 'month' 不为undefined时 year失效
25.   }
26. },
28. data: {
29.   dateIndex: null,
30.   hourValue: '',
31.   minValue: '',
32.   dateArr: [],
33.   hourArr: [],
34.   minArr: [],
36.   activeTime: null // 抛出的时间戳
37. },
39. methods: {
40.   _showChange(e) {
41.    if (e) {
42.     this.handleDateData()
43.     this.initData()
44.    }
45.   },
47.   handleSubmit() {
48.    this.bindclose()
49.    this.triggerEvent('change', { value: this.data.activeTime })
50.   },
52.   initData() {
53.    const now = +new Date()
54.    const index = this.data.dateArr.map(v => v.name).indexOf(utils.formatTime(now, '{m}月{d}日周{a}'))
55.    let tmp = this.data.dateArr
56.    tmp[index].name = '今天'
58.    this.setData({
59.     dateIndex: index,
60.     hourValue: utils.formatTime(now, '{h}'),
61.     minValue: utils.formatTime(now, '{i}'),
62.     dateArr: tmp,
63.     activeTime: now
64.    })
65.   },
67.   handleDateData() {
68.    const nowYear = new Date().getFullYear()
69.    let mins = []
70.    let hours = []
71.    let dates = []
73.    // 获取小时、分钟数组
74.    for (let i = 0; i < 60; i++) {
75.     mins.push(i.toString().length < 2 ? '0' + i : i.toString())
76.    }
77.    for (let j = 0; j < 24; j++) {
78.     hours.push(j.toString().length < 2 ? '0' + j : j.toString())
79.    }
81.    dates = this.getDays(nowYear)
83.    this.setData({
84.     hourArr: hours,
85.     minArr: mins,
86.     dateArr: dates
87.    })
88.   },
90.   getDays(year) {
91.    let pre_days = []
92.    let now_days = []
93.    let aft_days = []
95.    if (this.data.month == 'undefined') {
96.     /** 按年处理 */
97.     // 判断类型
98.     if (this.data.type == 'left') {
99.      for (let a = this.data.year; a >= 1; a--) {
100.       pre_days.push(...this.getDaysByYear(year - a, true))
101.      }
102.     } else if (this.data.type == 'right') {
103.      for (let b = 1; b <= this.data.year; b++) {
104.       aft_days.push(...this.getDaysByYear(year + b, true))
105.      }
106.     } else {
107.      for (let a = this.data.year; a >= 1; a--) {
108.       pre_days.push(...this.getDaysByYear(year - a, true))
109.      }
110.      for (let b = 1; b <= this.data.year; b++) {
111.       aft_days.push(...this.getDaysByYear(year + b, true))
112.      }
113.     }
114.     now_days = this.getDaysByYear(year)
115.    } else {
116.     /** 按月处理 */
117.     now_days = this.getDaysByMonth(year, this.data.type)
118.    }
120.    return pre_days.concat(now_days.concat(aft_days))
121.   },
123.   getDaysByYear(year, isIncludeYear) {
124.    let days = []
125.    for (let k = 1; k < 13; k++) {
126.     let each_days = new Date(year, k, 0).getDate()
127.     for (let _k = 1; _k <= each_days; _k++) {
128.      let time = +new Date(`${year}-${k}-${_k}`)
129.      if (isIncludeYear) {
130.       days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })
131.      } else {
132.       days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time })
133.      }
134.     }
135.    }
136.    return days
137.   },
139.   getDaysByMonth(year, type) {
140.    let days = []
141.    let nowMonth = new Date().getMonth() + 1
143.    // 当月份传负的或0时当成本月
144.    if (this.data.month > 0) {
145.     let months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
146.     let pre_mons = []
147.     let aft_mons = []
149.     // 生成往前、往后的月份数组
150.     for (let k = 1; k <= this.data.month; k++) {
151.      let tmp_pre = months.indexOf(nowMonth) - k
152.      let tmp_aft = months.indexOf(nowMonth) + k
153.      pre_mons.unshift(months[tmp_pre < 0 ? 12 + tmp_pre : tmp_pre])
154.      aft_mons.push(months[tmp_aft > 12 ? tmp_aft - 12 : tmp_aft])
155.     }
156.     if (type != 'right') {
157.      // 往前的月份的日期
158.      pre_mons.forEach(v => {
159.       // 跨年
160.       let month_days = 0
161.       if (v > nowMonth) {
162.        month_days = new Date(year - 1, v, 0).getDate()
163.        for (let k = 1; k <= month_days; k++) {
164.         let time = +new Date(`${year - 1}-${v}-${k}`)
165.         days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })
166.        }
167.       } else {
168.        month_days = new Date(year, v, 0).getDate()
169.        for (let k = 1; k <= month_days; k++) {
170.         let time = +new Date(`${year}-${v}-${k}`)
171.         days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time })
172.        }
173.       }
174.      })
175.     }
177.     // 本月的日期
178.     let month_days = new Date(year, nowMonth, 0).getDate()
179.     for (let k = 1; k <= month_days; k++) {
180.      let time = +new Date(`${year}-${nowMonth}-${k}`)
181.      days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time })
182.     }
184.     if (type != 'left') {
185.      // 往后的月份的日期
186.      aft_mons.forEach(_v => {
187.       // 跨年
188.       let month_days = 0
189.       if (_v < nowMonth) {
190.        month_days = new Date(year + 1, _v, 0).getDate()
191.        for (let k = 1; k <= month_days; k++) {
192.         let time = +new Date(`${year + 1}-${_v}-${k}`)
193.         days.push({ name: utils.formatTime(time, '{y}年{m}月{d}日周{a}'), value: time })
194.        }
195.       } else {
196.        month_days = new Date(year, _v, 0).getDate()
197.        for (let k = 1; k <= month_days; k++) {
198.         let time = +new Date(`${year}-${_v}-${k}`)
199.         days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), alue: time })
200.        }
201.       }
202.      })
203.     }
204.    } else {
205.     let month_days = new Date(year, nowMonth, 0).getDate()
206.     for (let k = 1; k <= month_days; k++) {
207.      let time = +new Date(`${year}-${nowMonth}-${k}`)
208.      days.push({ name: utils.formatTime(time, '{m}月{d}日周{a}'), value: time })
209.     }
210.    }
212.    return days
213.   },
215.   dateChange(e) {
216.    const day = this.data.dateArr[e.detail.value[0]]
217.    let time = day.value + (Number(this.data.hourValue) * 3600 + Number(this.data.minValue) * 60) * 1000
218.    this.setData({
219.     dateIndex: e.detail.value[0],
220.     activeTime: time
221.    })
222.   },
224.   hourChange(e) {
225.    const hour = Number(this.data.hourArr[e.detail.value[0]])
226.    let time = this.data.dateArr[this.data.dateIndex].value + (hour * 3600 + Number(this.data.minValue) * 60) * 1000
227.    this.setData({
228.     hourValue: this.data.hourArr[e.detail.value[0]],
229.     activeTime: time
230.    })
231.   },
233.   minChange(e) {
234.    const min = Number(this.data.minArr[e.detail.value[0]])
235.    let time = this.data.dateArr[this.data.dateIndex].value + (Number(this.data.hourValue) * 3600 + min * 60) * 1000
236.    this.setData({
237.     minValue: this.data.minArr[e.detail.value[0]],
238.     activeTime: time
239.    })
240.   },
242.   bindclose() {
243.    this.setData({
244.     show: false
245.    })
246.   },
248.   preventTouchMove() {
249.    // 阻止半屏状态下 页面滑动
250.   }
251. }
252. })

复制代码

wxss代码

1. .selector__picker {
2. width: 100%;
3. height: 80%;
4. margin-top: 20px;
5. font-size: 24px;
6. }

复制代码

上述代码中，js中引用的 utils 功能函数如下：

1. /**
2. * 日期格式化
3. */
4. export function formatTime(time, cFormat) {
5. if (arguments.length === 0) {
6.   return ''
7. }
8. const format = cFormat || '{y}-{m}-{d}'
9. let date
10. if (time === undefined || time === 0 || time === '') {
11.   return ''
12. } else if (typeof time === 'object') {
13.   date = time
14. } else {
15.   if (('' + time).length === 10) time = parseInt(time) * 1000
16.   date = new Date(time)
17. }
18. const formatObj = {
19.   y: date.getFullYear(),
20.   m: date.getMonth() + 1,
21.   d: date.getDate(),
22.   h: date.getHours(),
23.   i: date.getMinutes(),
24.   s: date.getSeconds(),
25.   a: date.getDay()
26. }
27. const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
28.   let value = formatObj[key]
29.   // Note: getDay() returns 0 on Sunday
30.   if (key === 'a') {
31.    return ['日', '一', '二', '三', '四', '五', '六'][value]
32.   }
33.   if (result.length > 0 && value < 10) {
34.    value = '0' + value
35.   }
36.   return value || 0
37. })
38. return time_str
39. }

复制代码

另外wxml中使用的一些wxss公共样式就不提供了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。