Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onefinestay/react-daterange-picker
https://github.com/onefinestay/react-daterange-picker
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/onefinestay/react-daterange-picker
- Owner: onefinestay
- License: other
- Created: 2014-10-03T15:57:48.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T22:19:40.000Z (about 2 years ago)
- Last Synced: 2024-10-19T15:02:39.488Z (about 2 months ago)
- Language: JavaScript
- Size: 7.74 MB
- Stars: 563
- Watchers: 21
- Forks: 208
- Open Issues: 86
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-daterange-picker - A React based date range picker. (Uncategorized / Uncategorized)
- awesome-list - react-daterange-picker - A React based date range picker. (Demos / Form Components)
- awesome-react-components - react-daterange-picker - A React based date range picker. (UI Components / Form Components)
README
React Daterange Picker
======================A React based date range picker. [Demo](http://onefinestay.github.io/react-daterange-picker/)
## Getting started
### InstallationAdd React Daterange Picker to your project by executing
```bash
npm install react-daterange-picker
```
or
```bash
yarn add react-daterange-picker
```### Usage
Here's an example of basic usage:
```js
import React, {Component} from 'react'
import DateRangePicker from 'react-daterange-picker'
import 'react-daterange-picker/dist/css/react-calendar.css' // For some basic styling. (OPTIONAL)class MyApp extends Component {
state = {
dates: null
}onSelect = dates => this.setState({dates})
render() {
return (
)
}
}
```Here is a working example:
[![Edit 0xv5m04yql](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0xv5m04yql?initialpath=%2Fsrc%2FDateRangeExample.js)## Features
* Select a date range in an intuitive way.
* Define date ranges that are not available for selection.
* Show any number of months at the same time.
* Visually represent half day states.### Available props
|prop|description|default|type|
|--|----|--|----|
|bemBlock|||String|
|bemNamespace||'DateRangePicker'|String|
|className|||String|
|dateStates|An array of date ranges and their states||Array|
|defaultState|||String|
|disableNavigation||false|Boolean|
|firstOfWeek|The first day of the week, as a number between 0-6, where 0 is Sunday|0|Integer|
|helpMessage|| |String|
|initialDate|| |Date|
|initialFromValue||true|Boolean|
|initialMonth|Overrides values derived from initialDate/initialRange| |Integer|
|initialRange|| |Object|
|initialYear|Overrides values derived from initialDate/initialRange| |Integer|
|locale||moment().locale()|String|
|maximumDate|The last date that is possible to choose. Every date after will be unselectable|null|Moment or Date|
|minimumDate|The earliest date that is possible to choose. Every date before will be unselectable |null|Moment or Date|
|numberOfCalendars|The number of months showing next to each other|1|Integer|
|onHighlightDate|Triggered when a date is highlighted (hovered)| |Function|
|onHighlightRange|Triggered when a range is highlighted (hovered)| |Function|
|onSelect|Triggered when a date or range is selected. returns `value`| | `({start, end}) => this.setState({start, end})` |
|onSelectStart|Triggered when the first date in a range is selected| |Function|
|paginationArrowComponent||PaginationArrow|Component|
|selectedLabel||'Your selected dates'|String|
|selectionType|| |String (`single` or `range`)|
|singleDateRange||false|Boolean|
|showLegend||false|Boolean|
|stateDefinitions|| |Object|
|value|Contains the start and end value of the selected date range. Format: `value={start: null, end: null}` (moment range)|null|Moment|## React version
React 0.14, 15, and 16 are all supported in the latest version of react-daterange-picker.
If you wish to user an older version of React, please use react-daterange-picker v0.12.x or below.
## Changelog
All change log information is available within the project's [releases](https://github.com/onefinestay/react-daterange-picker/releases).
## Contribute
Please feel to contribute to this project by making pull requests. You can see a
list of tasks that can be worked on in the [issues list](https://github.com/onefinestay/react-daterange-picker/issues).Before a pull request can be merged, ensure that you have linted your files and all tests are passing -
```shell
npm run lint
npm run test
```### Publishing
If you have been added as a project contributor and wish to publish a new release -
- Ensure that you have added yourself to the `package.json` contributors list
- Bump the npm version as appropriate, following [SemVer](http://semver.org/) conventions
- Update the [Demo](http://onefinestay.github.io/react-daterange-picker/) by running `npm run deploy-example`### Building example page
Once you have the repository cloned run the following commands to get started:
```shell
npm install
npm run develop
```This will start a local server at `http://localhost:9989` where you can see the
example page. It will also watch for any files changes and rebuild.
To update the compiled files in dist run `npm run build-dist-js`, and you can
lint the code with `npm run lint`.