# @retailwe/ui-period-selector

> ### 使用效果（参考图）

Latest version **0.0.15** (published 2020-11-12) · 0 weekly downloads

## Install

```sh
npm install @retailwe/ui-period-selector
pnpm add @retailwe/ui-period-selector
yarn add @retailwe/ui-period-selector
bun add @retailwe/ui-period-selector
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2020-11-12 |
| First published | 2020-08-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rachelrgao, gaterking, jeannehuang, jerryc |

## Links

- npm: https://www.npmjs.com/package/@retailwe/ui-period-selector
- Repository: git@git.code.tencent.com:tencent-retail-fe/retailwe
- npm.io page: https://npm.io/package/@retailwe/ui-period-selector

## Recent versions

- 0.0.15 (latest) — 2020-11-12
- 0.0.11 (beta) — 2020-10-27
- 0.0.14 — 2020-11-09
- 0.0.13 — 2020-10-27
- 0.0.10 — 2020-10-21
- 0.0.9 — 2020-10-15
- 0.0.8 — 2020-10-10
- 0.0.7 — 2020-10-09
- 0.0.6 — 2020-10-09
- 0.0.5 — 2020-09-28
- 0.0.3 — 2020-09-24
- 0.0.2 — 2020-08-27

## README

### period-selector 时间段选择器

### 使用效果（参考图）

![image-20200716151411951](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggsu2mh0ppj30c50k9wfp.jpg)

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

### 使用方法

```html
<!--- 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}}" />  
```

```tsx
// 脚本文件
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`声明。

---
_Source: https://npm.io/package/@retailwe/ui-period-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._