zent
Version:
一套前端设计语言和基于React的实现
29 lines (22 loc) • 2.7 kB
Markdown
---
title: DateRangeQuickPicker
path: component/component/date-range-quick-picker
group: 信息录入
---
## DateRangeQuickPicker
简单的时间范围选择组件, 提供前 7 天和前 30 天的快速选项.
### 使用场景
快速选择日期区间
### API
| 参数 | 说明 | 类型 | 默认值 | 备选值 |
| -------------------------- | ------------------------------ | ---------------------------- | -------------------------------------------------------------- | -------------------------------- |
| onChange | 时间变更回调函数 | `(value, chosenDay) => void` | | |
| value | 起始、结束时间 | array | `[]` | |
| preset | 自定义快捷选项 | array | `[{text: '最近7天', value: 7}, {text: '最近30天', value: 30}]` | |
| defaultSelectedPresetIndex | 默认选中的 preset 元素数组下标 | `number` | | |
| valueType | 设置 onChange 的返回值 | `string` | `''` | `'date'`, `'number'`, `'string'` |
| format | 返回日期字符串格式 | `string` | `'YYYY-MM-DD'` 或 `'YYYY-MM-DD HH:mm:ss'` | |
| chosenDays | 选择天数 | `number` \| `array` | | |
| min | 可选日期的最小值 | `string` \| `Date` | `''` | |
| max | 可选日期的最大值 | `string` \| `Date` | `''` | |
| className | 自定义类名 | `string` | `''` | |