{"id":13436933,"url":"https://github.com/onefinestay/react-daterange-picker","last_synced_at":"2025-10-02T13:10:50.023Z","repository":{"id":21446149,"uuid":"24764503","full_name":"onefinestay/react-daterange-picker","owner":"onefinestay","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-01T22:19:40.000Z","size":8116,"stargazers_count":560,"open_issues_count":86,"forks_count":207,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-07T16:46:58.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onefinestay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-03T15:57:48.000Z","updated_at":"2025-01-19T22:03:31.000Z","dependencies_parsed_at":"2023-01-13T21:29:01.399Z","dependency_job_id":null,"html_url":"https://github.com/onefinestay/react-daterange-picker","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onefinestay%2Freact-daterange-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onefinestay%2Freact-daterange-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onefinestay%2Freact-daterange-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onefinestay%2Freact-daterange-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onefinestay","download_url":"https://codeload.github.com/onefinestay/react-daterange-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243981734,"owners_count":20378594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T03:00:53.130Z","updated_at":"2025-10-02T13:10:44.968Z","avatar_url":"https://github.com/onefinestay.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Form Components"],"readme":"React Daterange Picker\n======================\n\nA React based date range picker. [Demo](http://onefinestay.github.io/react-daterange-picker/)\n\n## Getting started\n### Installation\n\nAdd React Daterange Picker to your project by executing\n\n```bash\nnpm install react-daterange-picker\n```\nor\n```bash\nyarn add react-daterange-picker\n```\n\n### Usage\n\nHere's an example of basic usage:\n\n```js\nimport React, {Component} from 'react'\nimport DateRangePicker from 'react-daterange-picker'\nimport 'react-daterange-picker/dist/css/react-calendar.css' // For some basic styling. (OPTIONAL)\n\nclass MyApp extends Component {\n  state = {\n    dates: null\n  }\n\n  onSelect = dates =\u003e this.setState({dates})\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cDateRangePicker\n          onSelect={this.onSelect}\n          value={this.state.dates}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nHere is a working example:\n[![Edit 0xv5m04yql](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0xv5m04yql?initialpath=%2Fsrc%2FDateRangeExample.js)\n\n## Features\n\n* Select a date range in an intuitive way.\n* Define date ranges that are not available for selection.\n* Show any number of months at the same time.\n* Visually represent half day states.\n\n### Available props\n|prop|description|default|type|\n|--|----|--|----|\n|bemBlock|||String|\n|bemNamespace||'DateRangePicker'|String|\n|className|||String|\n|dateStates|An array of date ranges and their states||Array|\n|defaultState|||String|\n|disableNavigation||false|Boolean|\n|firstOfWeek|The first day of the week, as a number between 0-6, where 0 is Sunday|0|Integer|\n|helpMessage|| |String|\n|initialDate|| |Date|\n|initialFromValue||true|Boolean|\n|initialMonth|Overrides values derived from initialDate/initialRange| |Integer|\n|initialRange|| |Object|\n|initialYear|Overrides values derived from initialDate/initialRange| |Integer|\n|locale||moment().locale()|String|\n|maximumDate|The last date that is possible to choose. Every date after will be unselectable|null|Moment or Date|\n|minimumDate|The earliest date that is possible to choose. Every date before will be unselectable |null|Moment or Date|\n|numberOfCalendars|The number of months showing next to each other|1|Integer|\n|onHighlightDate|Triggered when a date is highlighted (hovered)| |Function|\n|onHighlightRange|Triggered when a range is highlighted (hovered)| |Function|\n|onSelect|Triggered when a date or range is selected. returns `value`| | `({start, end}) =\u003e this.setState({start, end})` |\n|onSelectStart|Triggered when the first date in a range is selected| |Function|\n|paginationArrowComponent||PaginationArrow|Component|\n|selectedLabel||'Your selected dates'|String|\n|selectionType|| |String (`single` or `range`)|\n|singleDateRange||false|Boolean|\n|showLegend||false|Boolean|\n|stateDefinitions|| |Object|\n|value|Contains the start and end value of the selected date range. Format: `value={start: null, end: null}` (moment range)|null|Moment|\n\n\n\n\n## React version\n\nReact 0.14, 15, and 16 are all supported in the latest version of react-daterange-picker.\n\nIf you wish to user an older version of React, please use react-daterange-picker v0.12.x or below.\n\n## Changelog\n\nAll change log information is available within the project's [releases](https://github.com/onefinestay/react-daterange-picker/releases).\n\n## Contribute\n\nPlease feel to contribute to this project by making pull requests. You can see a\nlist of tasks that can be worked on in the [issues list](https://github.com/onefinestay/react-daterange-picker/issues).\n\nBefore a pull request can be merged, ensure that you have linted your files and all tests are passing -\n\n```shell\nnpm run lint\nnpm run test\n```\n\n### Publishing\n\nIf you have been added as a project contributor and wish to publish a new release -\n\n  - Ensure that you have added yourself to the `package.json` contributors list\n  - Bump the npm version as appropriate, following [SemVer](http://semver.org/) conventions\n  - Update the [Demo](http://onefinestay.github.io/react-daterange-picker/) by running `npm run deploy-example`\n\n### Building example page\n\nOnce you have the repository cloned run the following commands to get started:\n\n```shell\nnpm install\nnpm run develop\n```\n\nThis will start a local server at `http://localhost:9989` where you can see the\nexample page. It will also watch for any files changes and rebuild.\nTo update the compiled files in dist run `npm run build-dist-js`, and you can\nlint the code with `npm run lint`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonefinestay%2Freact-daterange-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonefinestay%2Freact-daterange-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonefinestay%2Freact-daterange-picker/lists"}