Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KELEN/r-date-picker
Base on react high customize date picker component
https://github.com/KELEN/r-date-picker
react-date-picker react-date-range react-dates react-day
Last synced: about 1 month ago
JSON representation
Base on react high customize date picker component
- Host: GitHub
- URL: https://github.com/KELEN/r-date-picker
- Owner: KELEN
- Created: 2019-03-20T10:11:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T17:09:03.000Z (over 1 year ago)
- Last Synced: 2024-10-30T08:06:17.432Z (about 1 month ago)
- Topics: react-date-picker, react-date-range, react-dates, react-day
- Language: JavaScript
- Homepage:
- Size: 6.26 MB
- Stars: 13
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - r-date-picker - React.js high customize date picker component, easy style it. (UI Components / Form Components)
- awesome-react-components - r-date-picker - React.js high customize date picker component, easy style it. (UI Components / Form Components)
README
## r-date-picker
基于react的日历选择组件，支持单选，多选
## [demo](https://kelen.github.io/r-date-picker/)
## Introduce
- 支持单选和范围选择
- 可以定制渲染项
- 日历切换动画
- 支持一个或者两个日历选择操作
- 支持国际化
- 不是table渲染，灵活配置样式，通过class覆盖即可
## How to use
### install
```
npm i r-date-picker
```
### use module
```
import { DatePicker } from 'r-date-picker'
import { DateRangePicker } from 'r-date-picker'
```
### import index.less
```
import 'r-date-picker/src/styles/index.less'
```
### DatePicker
```javascript
```
#### 可选项
| 属性 | 值类型 | 例子 | 说明 |
| ------------ | ------------ | ------------ | -- |
| selectable | boolean | selectable={false} | 是否可选择，默认true |
| minDate | moment object | moment('2019-04-01') | 可以切换的最小日历 |
| maxDate | moment object | moment('2019-04-01') | 可以切换的最大日历 |
| defaultDate | moment对象或者moment数组 | moment('2019-04-01') | 默认选中值，对象是选中单个值，数组是选择范围 |
| ranges | array | [[]] | 二维数组，[[moment('2019-03-21'), moment('2019-03-25')], [moment('2019-03-10'), moment('2019-03-10')], [moment('2019-03-1'), moment('2019-03-4')]] |
| language | string | cn | cn/en |
| disabledDates | array | ['2019-04-11', '2019-04-22'] | 禁止选择的日期数组 |
| onMonthChange | function | | 月改变事件 |
| onDateClick | function | 日期点击事件 |
| onDateChange | function | | 日期选择回调 |
| onDateRangeChange | function | | 范围选择回调 |
| itemRender | function | | 自定义渲染项 |
| renderPrevBtn | function | | 渲染上一页按钮 |
| renderNextBtn | function | | 渲染下一页按钮 |
#### itemRender属性
自定义渲染项，可以绘制头像，绘制任意除了数字以外的其他信息，值是一个函数
```javascript
{
const markDays = {
20190329: {
avator: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4208386305,57701306&fm=27&gp=0.jpg'
},
20190327: {
avator: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2060761043,284284863&fm=27&gp=0.jpg'
}
}
let mark, target
if (item.date && (target = markDays[item.date.format('YYYYMMDD')])) {
mark = (
)
} else {
mark = ({ item.num })
}
return mark
}
}/>
```
### DateRangePicker
```javascript
```
### 可选项
| 属性 | 值类型 | 例子 | 说明 |
| ------------ | ------------ | ------------ | -- |
| single | boolean | single={ true } | 单个日历选范围 |
| selectable | boolean | selectable={false} | 是否可选择，默认true |
| minDate | moment object | moment('2019-04-01') | 可以切换的最小日历 |
| maxDate | moment object | moment('2019-04-01') | 可以切换的最大日历 |
| defaultDate | moment对象或者moment数组 | moment('2019-04-01') | 默认选中值，对象是选中单个值，数组是选择范围 |
| ranges | array | [[]] | 二维数组，[[moment('2019-03-21'), moment('2019-03-25')], [moment('2019-03-10'), moment('2019-03-10')], [moment('2019-03-1'), moment('2019-03-4')]] |
| language | string | cn | cn/en |
| disabledDates | array | ['2019-04-11', '2019-04-22'] | 禁止选择的日期数组 |
| onMonthChange | function | | 月改变事件 |
| onDateClick | function | 日期点击事件 |
| onDateChange | function | | 日期选择回调 |
| onDateRangeChange | function | | 范围选择回调 |
| itemRender | function | | 自定义渲染项 |
| renderPrevBtn | function | | 渲染上一页按钮 |
| renderNextBtn | function | | 渲染下一页按钮 |
## Custom styles class
| 类名 | 说明 |
| ------------ | ------------ |
| rdp__container | 容器 |
| range__container | 范围选择容器 |
| rdp__prev-btn | 左按钮 |
| rdp__next-btn | 右按钮 |
| rdp__days-row | 日历行 |
| rdp__days-item | 日历day项 |
| rdp__days-item-active--single | 选中 |
| rdp__days-item-active | 选中激活 |
| rdp__days-item-active--start | 选中开始 |
| rdp__days-item-active--start | 选中连接 |
| rdp__days-item-active--end | 选中结束 |
| rdp__days-item-active--range-start | 范围开始 |
| rdp__days-item-active--range-connect | 范围连接 |
| rdp__days-item-active--range-end | 范围结束 |
## Development
```bash
npm i
npm run start
```
## Avaiable
- [x] 单日历选择日期
- [x] 单日历选择范围
- [x] 两个日历选择范围
- [x] 个性化修改样式
- [x] 范围限制
- [x] 国际化支持，只支持英文和中文
- [ ] 新增自定义国际化语言
- [ ] 选择年份