# @riil-frontend/component-quick-time-range
> 快捷选择最近时间段
Latest version **2.1.4** (published 2023-10-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install @riil-frontend/component-quick-time-range
pnpm add @riil-frontend/component-quick-time-range
yarn add @riil-frontend/component-quick-time-range
bun add @riil-frontend/component-quick-time-range
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.4 |
| Published | 2023-10-18 |
| First published | 2021-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | riil-frontend |
| Keywords | ice, react, component |
## Links
- npm: https://www.npmjs.com/package/@riil-frontend/component-quick-time-range
- Homepage: https://unpkg.com/@riil-frontend/component-quick-time-range@2.1.4/build/index.html
- npm.io page: https://npm.io/package/@riil-frontend/component-quick-time-range
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.1.4 (latest) — 2023-10-18
- 2.1.3 — 2023-05-23
- 2.1.2 — 2022-11-21
- 2.1.1 — 2022-10-31
- 2.1.0 — 2022-10-26
- 2.0.0 — 2021-12-20
- 1.0.0-a.4 — 2021-04-14
- 1.0.0-a.3 — 2021-04-14
- 1.0.0-a.2 — 2021-01-29
- 1.0.0-a.1 — 2021-01-28
## README
# 最近时间快捷选择器
quick-time-range
快捷选择最近时间段。
功能描述：
1. 支持初始化已选项，初始化自定时间段，自定义下拉选项。
2. 选择后返回秒单位的时间戳数组[startTime,endTime]；
3. 从常用时间切换到自定时间，会自动带入上次选择的常用时间段；
4. 日期组件点击确认才会触发 onChange,点空白处会撤销操作
5. onChange 回调参数中的 isDeff，可以判断出用户操作前后时间段是否发生了变化，便于自行处理业务逻辑。
## API
## QuickTimeRange
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------------------- | ------ | ---- |
| rangePickerProps | 透传 RangePicker 属性 | - | RangePicker.props | | |
| selectProps | 透传 Select 属性 | - | Select.props | | |
| defaultInterval | 初始化下拉选中项,此属性对应 option 中的 value 值 | - | string | | |
| defaultCustomTime | 初始化自定义时间选择段[startTime,endTime],秒为单位的时间戳. | - | [int,int] / null | | |
| selectOption | 自定义下拉项，数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致，time 为秒级时间戳，CUSTOM 为保留字段，不可更改,但可以删除（没有自定义项）。`` ``当设置此属性，需同时设置 defaultInterval 为配置项数据中的默认选项 key 值 `` | - | object | | |
| onChange | 切换，选择日期后组件回调： rangeTime 组件返回选中时间段，[startTime,endTime],秒为单位的时间戳；isDiff 操作前和操作后，时间段是否不同； interval 下拉框所选项 key 值；customTime 日期选择组件所选值 [startTime,endTime],秒为单位的时间戳； | - | ({ rangeTime:[int,int], isDiff:boolean, interval:string, customTime:[int,int] })=>{} | | |
| current | 初始化当前时刻(秒为单位的时间戳)`` ``注意：若不设置此值，每次切换常用时间，都将使用最新本机时刻作为结束时间 `` | - | int | | |
| onInit | 初始化回调，参数返回 setValue 方法，用来手动改变选择器值.setValue(interval:下拉选择类型,pickerValue:rangePicker 的 value 值，格式为[moment,moment]) 注意，通过setValue设置的值，不会触发组件的onChange | - | (setValue:fun)=>{} ; setValue:(interval:OPTION.value,rangeTime:[start:moment,end:moment])=>{} | | |
## OPTION
组件默认配置项，自定义下拉项，数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致，time 为秒级时间戳，CUSTOM 为保留字段，不可更改,但可以删除（没有自定义项）
```js
OPTION = {
HOUR1: { label: '最近1小时', value: 'HOUR1', time: 60 * 60 },
DAY1: { label: '最近1天', value: 'DAY1', time: 24 * 60 * 60 },
DAY7: { label: '最近7天', value: 'DAY7', time: 7 * 24 * 60 * 60 },
DAY30: { label: '最近30天', value: 'DAY30', time: 30 * 24 * 60 * 60 },
CUSTOM: { label: '自定义时间', value: 'CUSTOM', time: Infinity },
};
```
---
_Source: https://npm.io/package/@riil-frontend/component-quick-time-range · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._