0.0.15 • Published 5 years ago

@retailwe/ui-period-selector

Licence

—

Version

0.0.15

Deps

Size

24 kB

Vulns

Weekly

Summary Dependency Versions

period-selector 时间段选择器

使用效果（参考图）

![image-20200716151447319](/Users/sydzou/Library/Application Support/typora-user-images/image-20200716151447319.png)

使用方法

<!--- 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声明。