{"id":26685938,"url":"https://github.com/Adphorus/react-date-range","last_synced_at":"2025-03-26T11:01:13.857Z","repository":{"id":37731567,"uuid":"43954094","full_name":"hypeserver/react-date-range","owner":"hypeserver","description":"A React component for choosing dates and date ranges.","archived":false,"fork":false,"pushed_at":"2024-04-22T10:37:11.000Z","size":3897,"stargazers_count":2613,"open_issues_count":238,"forks_count":696,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-03-23T15:03:50.593Z","etag":null,"topics":["datetime","datetimepicker","range-picker","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hypeserver.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-09T12:29:40.000Z","updated_at":"2025-03-18T17:31:02.000Z","dependencies_parsed_at":"2024-04-12T08:17:45.698Z","dependency_job_id":"1eec04dd-cc17-4b0e-90c6-482ed27bcdc8","html_url":"https://github.com/hypeserver/react-date-range","commit_stats":{"total_commits":368,"total_committers":75,"mean_commits":4.906666666666666,"dds":0.7934782608695652,"last_synced_commit":"b1418dc3141bfa58da68655a80c8d8817681cb70"},"previous_names":["adphorus/react-date-range"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypeserver%2Freact-date-range","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypeserver%2Freact-date-range/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypeserver%2Freact-date-range/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypeserver%2Freact-date-range/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypeserver","download_url":"https://codeload.github.com/hypeserver/react-date-range/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"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":["datetime","datetimepicker","range-picker","react"],"created_at":"2025-03-26T11:01:13.443Z","updated_at":"2025-03-26T11:01:13.791Z","avatar_url":"https://github.com/hypeserver.png","language":"JavaScript","readme":"# react-date-range\n[![npm](https://img.shields.io/npm/v/react-date-range)](https://www.npmjs.com/package/react-date-range)\n[![npm](https://img.shields.io/npm/l/react-date-range)]()\n[![npm](https://img.shields.io/npm/dw/react-date-range)](https://www.npmjs.com/package/react-date-range)\n[![sponsors](https://img.shields.io/github/sponsors/hypeserver)](https://github.com/sponsors/hypeserver)\n\n\nA date library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.\n\n# Notice ⚠️\nThis project is currently unmaintained because the original maintainers are busy with other things. It should be pretty stable in it's current state but we won't be updating it in the foreseeable future. **If you are willing to maintain it, please fork and open a pr adding your fork's link to this readme.**\n\n### Why should you use `react-date-range`?\n\n- Stateless date operations\n- Highly configurable\n- Multiple range selection\n- Based on native js dates\n- Drag n Drop selection\n- Keyboard friendly\n\n**Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range)\n\n![](https://raw.githubusercontent.com/hypeserver/react-date-range/master/demo/ss.png)\n\n\n## Getting Started\n### Installation\n\n```\nnpm install --save react-date-range\n```\nThis plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder.\n\n```\nnpm install --save react date-fns\n```\n\n## Usage\n\nYou need to import skeleton and theme styles first.\n\n```javascript\nimport 'react-date-range/dist/styles.css'; // main style file\nimport 'react-date-range/dist/theme/default.css'; // theme css file\n```\n\n### `DatePicker`\n```javascript\nimport { Calendar } from 'react-date-range';\n\nclass MyComponent extends Component {\n  handleSelect(date){\n    console.log(date); // native Date object\n  }\n  render(){\n    return (\n      \u003cCalendar\n        date={new Date()}\n        onChange={this.handleSelect}\n      /\u003e\n    )\n  }\n}\n\n```\n\n### `DateRangePicker / DateRange`\n```javascript\nimport { DateRangePicker } from 'react-date-range';\n\nclass MyComponent extends Component {\n  handleSelect(ranges){\n    console.log(ranges);\n    // {\n    //   selection: {\n    //     startDate: [native Date Object],\n    //     endDate: [native Date Object],\n    //   }\n    // }\n  }\n  render(){\n    const selectionRange = {\n      startDate: new Date(),\n      endDate: new Date(),\n      key: 'selection',\n    }\n    return (\n      \u003cDateRangePicker\n        ranges={[selectionRange]}\n        onChange={this.handleSelect}\n      /\u003e\n    )\n  }\n}\n\n```\n\n### Options\n\nProperty                             | type      | Default Value    | Description\n-------------------------------------|-----------|------------------|-----------------------------------------------------------------\nlocale                               | Object    | enUS from locale | you can view full list from [here](https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/docs/I18n#supported-languages).\nclassName                            | String    |                  | wrapper classname\nmonths                               | Number    | 1                | rendered month count\nshowSelectionPreview                 | Boolean   | true             | show preview on focused/hovered dates\nshowMonthAndYearPickers              | Boolean   | true             | show select tags for month and year on calendar top, if false it will just display the month and year\nrangeColors                          | String[]  |                  | defines color for selection preview.\nshownDate                            | Date      |                  | initial focus date\nminDate                              | Date      |                  | defines minimum date. Disabled earlier dates\nmaxDate                              | Date      |                  | defines maximum date. Disabled later dates\ndirection                            | String    | 'vertical'       | direction of calendar months. can be `vertical` or `horizontal`\ndisabledDates                        | Date[]    | []               | dates that are disabled\ndisabledDay                          | Func      |                  | predicate function that disable day fn(date: Date)\nscroll                               | Object    | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section\nshowMonthArrow                       | Boolean   | true             | show/hide month arrow button\nnavigatorRenderer                    | Func      |                  | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)\nranges                               | *Object[] | []               | Defines ranges. array of range object\nmoveRangeOnFirstSelection(DateRange) | Boolean   | false            | move range on startDate selection. Otherwise endDate will replace with startDate unless `retainEndDateOnFirstSelection` is set to true.\nretainEndDateOnFirstSelection(DateRange) | Boolean   | false            | Retain end date when the start date is changed, unless start date is later than end date. Ignored if `moveRangeOnFirstSelection` is set to true.\nonChange(Calendar)                   | Func      |                  | callback function for date changes. fn(date: Date)\nonChange(DateRange)                  | Func      |                  | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties.\ncolor(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar\ndate(Calendar)                       | Date      |                  | date value for Calendar\nshowDateDisplay(DateRange)           | Boolean   | true             | show/hide selection display row. Uses `dateDisplayFormat` for formatter\nonShownDateChange(DateRange,Calendar)| Function  |                  | Callback function that is called when the shown date changes\ninitialFocusedRange(DateRange)       | Object    |                  | Initial value for focused range. See `focusedRange` for usage.\nfocusedRange(DateRange)              | Object    |                  | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).\nonRangeFocusChange(DateRange)        | Object    |                  | Callback function for focus changes\npreview(DateRange)                   | Object    |                  | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`\nshowPreview(DateRange)               | bool      | true             | visibility of preview\neditableDateInputs(Calendar)         | bool      | false            | whether dates can be edited in the Calendar's input fields\ndragSelectionEnabled(Calendar)       | bool      | true             | whether dates can be selected via drag n drop\ncalendarFocus(Calendar)              | String    | 'forwards'       | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'\npreventSnapRefocus(Calendar)  | bool      | false            | prevents unneceessary refocus of shown range on selection\nonPreviewChange(DateRange)           | Object    |                  | Callback function for preview changes\ndateDisplayFormat                    | String    | `MMM d, yyyy`    | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)\ndayDisplayFormat                     | String    | `d`              | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)\nweekdayDisplayFormat                 | String    | `E`              | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)\nmonthDisplayFormat                   | String    | `MMM yyyy`       | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)\nweekStartsOn                         | Number    |                  | Whether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS\nstartDatePlaceholder                 | String    | `Early`          | Start Date Placeholder\nendDatePlaceholder                   | String    | `Continuous`     | End Date Placeholder\nfixedHeight                          | Boolean   | false            | Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.\nrenderStaticRangeLabel(`DefinedRange`)| Function |                  | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.\nstaticRanges(`DefinedRange`, `DateRangePicker`)  | Array            | [default preDefined ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -\ninputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -\nariaLabels                           | Object    | {}               | inserts aria-label to inner elements\ndayContentRenderer                   | Function  | null             | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.\n\n *shape of range:\n ```js\n  {\n    startDate: PropTypes.object,\n    endDate: PropTypes.object,\n    color: PropTypes.string,\n    key: PropTypes.string,\n    autoFocus: PropTypes.bool,\n    disabled: PropTypes.bool,\n    showDateDisplay: PropTypes.bool,\n  }\n```\n\n **shape of ariaLabels:\n ```js\n  {\n    // The key of dateInput should be same as key in range.\n    dateInput: PropTypes.objectOf(\n      PropTypes.shape({\n        startDate: PropTypes.string,\n        endDate: PropTypes.string\n      })\n    ),\n    monthPicker: PropTypes.string,\n    yearPicker: PropTypes.string,\n    prevButton: PropTypes.string,\n    nextButton: PropTypes.string,\n  }\n```\n#### Infinite Scrolled Mode\n\nTo enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.\nIf you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/width with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.\n\n```js\n  // shape of scroll prop\n  scroll: {\n    enabled: PropTypes.bool,\n    monthHeight: PropTypes.number,\n    longMonthHeight: PropTypes.number, // some months has 1 more row than others\n    monthWidth: PropTypes.number, // just used when direction=\"horizontal\"\n    calendarWidth: PropTypes.number, // defaults monthWidth * months\n    calendarHeight: PropTypes.number, // defaults monthHeight * months\n  }),\n```\n\n\n### Release workflow\n- Merge everything that needs to be in the release to master\n- Open a new release PR than:\n  - bumps version to appropriate one \u003cnew_version\u003e\n  - Update CHANGELOG.md\n- Make sure the demo and important features are working as expected\n- After merging, tag the master commit with `release/\u003cnew_version\u003e` and let Github Action handle publishing\n- = Profit 🙈\n\n### TODOs\n\n- Make mobile friendly (integrate tap and swipe actions)\n- Add tests\n- Improve documentation\n","funding_links":["https://github.com/sponsors/hypeserver"],"categories":["UI Components","Uncategorized","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Form Components","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdphorus%2Freact-date-range","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAdphorus%2Freact-date-range","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdphorus%2Freact-date-range/lists"}