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

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