{"id":20524266,"url":"https://github.com/aadilhasan/react-range-picker","last_synced_at":"2025-04-14T03:24:04.354Z","repository":{"id":33001573,"uuid":"147815281","full_name":"aadilhasan/react-range-picker","owner":"aadilhasan","description":"Date / range picker for react js","archived":false,"fork":false,"pushed_at":"2022-12-08T12:08:41.000Z","size":1602,"stargazers_count":11,"open_issues_count":35,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T17:21:48.794Z","etag":null,"topics":["calendar","date-picker","range-picker","react","react-calendar","reactjs","single-range-picker"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aadilhasan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-07T11:36:41.000Z","updated_at":"2024-01-19T14:20:50.000Z","dependencies_parsed_at":"2023-01-14T23:00:26.588Z","dependency_job_id":null,"html_url":"https://github.com/aadilhasan/react-range-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-range-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-range-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-range-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-range-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aadilhasan","download_url":"https://codeload.github.com/aadilhasan/react-range-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248814341,"owners_count":21165750,"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":["calendar","date-picker","range-picker","react","react-calendar","reactjs","single-range-picker"],"created_at":"2024-11-15T22:48:48.182Z","updated_at":"2025-04-14T03:24:04.335Z","avatar_url":"https://github.com/aadilhasan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React Js based date/range picker, unlike other range pickers it uses single calendar to select the range.\n[Click here to see it in action](https://codesandbox.io/s/async-rain-m5m831xjk9)\n\n### install\n\n```sh\n$ npm i react-range-picker --save\n```\n\n### use\n\n```sh\nimport RangePicker from \"react-range-picker\"\n\n\u003cRangePicker/\u003e\n```\n\n### APIS\n\n| API | Type | Description |\n| ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| visible | boolean | to controlled visibility of the calendar, `only works if on calendar mount visible prop is a boolean value` |\n| defaultValue | object | set default values for the calendar - `{startDate: Date, endDate: Date}` |\n| onDateSelected | function | gets called each time date/time gets selected (params - startDate\u003cDate object\u003e, startDate\u003cDate object\u003e) |\n| onOpen | function | gets called when calendar opens |\n| onClose | function | gets called when calendar closes or ok/select button is pressed |\n| closeOnSelect | boolean | if true picker will hide on select of a date or range (default false) |\n| closeOnOutsideClick | boolean | if true calendar won't close on click of outside area (default true) |\n| disableRange | boolean | if true user can select only one date (default false) |\n| selectTime | boolean | if true, time select will show up on date select (default false) |\n| rangeTillEndOfDay | boolean | if true, then second selected date for range will have time of end of the day (11.59 PM) else it will have time of start of the day (12:00 AM) |\n| placeholder | function =\u003e ReactComponent | change placeholder, placeholder function will recieve following object as param - `{startDate (date object),endDate (date object)}` |\n| placeholderText | string | replaces placeholder default text |\n| dateFormat | string | format of placeholder date |\n| footer | function =\u003e ReactComponent | change footer, footer function will recieve following object as param - `{startDate (date object), endDate (date object),today (function) - to select today's date, close (function) - closes the calendar and calls, onClose callback passed by user}` |\n\nFollowings are the variables for the date format.\n\n- `dd` - date\n- `DD` - day short\n- `DDDD` - day full\n- `mm` - month\n- `MM` - month short\n- `MMMM` - month full\n- `yyyy or YYYY` - full year\n- `h` - hours\n- `mi` - minutes\n- `a` - lowercase period (am),\n- `A` - capital period (AM)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadilhasan%2Freact-range-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faadilhasan%2Freact-range-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadilhasan%2Freact-range-picker/lists"}