period-selector 时间段选择器

使用效果（参考图）


使用方法

<!--- wxml文件 --->
<wr-period-selector bind:onConfirm="onSearch" show="{{show}}" bgColor="red" start="{{createTimeInterval[0]}}" end="{{createTimeInterval[1]}}" dayType="{{dayType}}" bind:onHide="billFilterHide" maxYearAfter="{{0}}" limitDay="{{365}}" />  

// 脚本文件
Page({
  data: {
    dayType: 0,
    createTimeInterval: [],
    qid: false,
    show: false,
  },
  onTap() {
    this.setData({
      show: true,
    });
  },
  onSearch(e) {
    const { createTimeInterval, showTime } = e.detail || {};
    let cardTitle = '今日';
    if (showTime === '时间段') {
      cardTitle =
        this.formatDate(createTimeInterval[0]) +
        ' - ' +
        this.formatDate(createTimeInterval[1]);
    } else if (showTime !== '') {
      cardTitle = showTime + '数据';
    }
    this.setData({
      cardTitle,
    });
    this.billFilterHide(); // 手动关闭弹窗
    this.setData({ createTimeInterval });
  },
  billFilterHide() {
    this.setData({
      show: false,
    });
  },
  formatDate(timestamp: number) {
    if (!timestamp || typeof timestamp !== 'number') {
      return '';
    }
    const date = new Date(Number(timestamp));
    return (
      date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    );
  },
});

Props

| 参数 | 说明 | 要求 | 默认值 | | ---------------- | -------------------------- | --------------- | ---------- | | limitDay |限制范围时长|Number| 默认-1，不限制| | bgColor | 唯一入参‘red’红色卡片，不传为蓝色 | string | 卡片颜色 | |show |显示隐藏|boolean|false| | start | 时间段开始日期的时间戳 | 时间戳 | - | | end | 时间段结束日期的时间戳 | 时间戳 | - | | maxYearBefore | 最早可选时间相距年数 | Number | 5 | | maxYearAfter | 最晚可选时间相距年数 | Number | 5 | | dayType | 0：今天，1:近7日， 2:近30日 3：近3个月, 设置这个后初始化会覆盖start和end | Number | -1 |

Events

| 事件 | 说明 | | ----------------- | ---------------------------- | | onConfirm | 当确定按钮被点击时触发 | | onHide | 关闭回调 | | onReset | 关闭回调 , 默认重置初始值，可覆盖 | | onSelectTag | 点击时间标签回调 |

// onConfirm回调
{createTimeInterval: Array(2), showTime: "今日"}

外部样式类

| 样式类名 | 说明 | | -------------------- | -------------------------- | | picker-wrapper-class | 根样式 | | active-label-class | 时间段标签被选择后的样式 | | datetime-range | 选择时间的样式 | | confirm-btn-class | 确认按钮的样式 | | reset-class | 重置的样式 | | picker-confirm-class | 日期选择器中确认按钮的样式 | | picker-cancel-class | 日期选择器中取消按钮的样式 |

注意⚠️：为使外部样式生效，其CSS属性最好以!important声明。