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

开发微信小程序过程中，有个需求需要用到日期时间筛选器，查看微信官方文档后，发现官方文档的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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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 () {
      // 阻止半屏状态下 页面滑动
    }

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48