{"id":13436967,"url":"https://github.com/skratchdot/react-bootstrap-daterangepicker","last_synced_at":"2025-05-15T06:03:46.381Z","repository":{"id":18901969,"uuid":"22120268","full_name":"skratchdot/react-bootstrap-daterangepicker","owner":"skratchdot","description":"A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.","archived":false,"fork":false,"pushed_at":"2023-10-11T08:28:22.000Z","size":13768,"stargazers_count":474,"open_issues_count":26,"forks_count":200,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-15T06:03:18.890Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://projects.skratchdot.com/react-bootstrap-daterangepicker/","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/skratchdot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-22T20:52:43.000Z","updated_at":"2024-11-06T10:32:47.000Z","dependencies_parsed_at":"2024-06-18T12:16:41.507Z","dependency_job_id":"102510c3-0bcb-4666-8550-94ccb8f759ea","html_url":"https://github.com/skratchdot/react-bootstrap-daterangepicker","commit_stats":{"total_commits":222,"total_committers":30,"mean_commits":7.4,"dds":"0.18468468468468469","last_synced_commit":"9268dc47c4300c1f26e03acd4ca3e9d71c5cdb1d"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Freact-bootstrap-daterangepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Freact-bootstrap-daterangepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Freact-bootstrap-daterangepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Freact-bootstrap-daterangepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skratchdot","download_url":"https://codeload.github.com/skratchdot/react-bootstrap-daterangepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283336,"owners_count":22045140,"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.388Z","updated_at":"2025-05-15T06:03:46.360Z","avatar_url":"https://github.com/skratchdot.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","UI Components","Demos"],"sub_categories":["Uncategorized","Tools","Form Components"],"readme":"# react-bootstrap-daterangepicker\n\n[![NPM version](https://badge.fury.io/js/react-bootstrap-daterangepicker.svg)](http://badge.fury.io/js/react-bootstrap-daterangepicker)\n[![Build Status](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker.svg?branch=master)](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker)\n[![Code Climate](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker.png)](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker)\n[![Coverage Status](https://coveralls.io/repos/skratchdot/react-bootstrap-daterangepicker/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/skratchdot/react-bootstrap-daterangepicker?branch=master)\n\n[![NPM](https://nodei.co/npm/react-bootstrap-daterangepicker.png)](https://npmjs.org/package/react-bootstrap-daterangepicker)\n\n# 🚨 Deprecation Notice 🚨\n\n\u003e I put this project on github because I used it briefly for a project back in 2014. I haven't used it for years, and have recommended\n\u003e looking for a \"pure react\" date picker library. I might continue to merge small PRs, but will not be giving this library much/any\n\u003e support. I recommend using one of the [other react date picker](#other-react-date-pickers) libraries listed below.\n\n## Description\n\nA date/time picker for react (using bootstrap). This is a react wrapper around\nan existing jQuery/bootstrap library (it is not a pure react port):\n\n[bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker)\n\n## Getting Started\n\n1.  Install the needed peer dependencies:\n    `npm install --save bootstrap-daterangepicker react jquery moment`\n\n2.  Install the module with:\n    `npm install --save react-bootstrap-daterangepicker`\n\n3.  Include the bootstrap@4 css and fonts in your project.\n    (aka `import 'bootstrap/dist/css/bootstrap.css';`)\n\n4.  Include the bootstrap-daterangepicker css in your project.\n    (aka `import 'bootstrap-daterangepicker/daterangepicker.css';`)\n\n5.  This is a commonjs library. You will need a tool like browserify/webpack/etc to build your code.\n\n```javascript\nimport React, { Component } from 'react';\nimport DateRangePicker from 'react-bootstrap-daterangepicker';\n// you will need the css that comes with bootstrap@3. if you are using\n// a tool like webpack, you can do the following:\nimport 'bootstrap/dist/css/bootstrap.css';\n// you will also need the css that comes with bootstrap-daterangepicker\nimport 'bootstrap-daterangepicker/daterangepicker.css';\n\nclass MyComponent {\n  render() {\n    return (\n      \u003cDateRangePicker\n        initialSettings={{ startDate: '1/1/2014', endDate: '3/1/2014' }}\n      \u003e\n        \u003cbutton\u003eClick Me To Open Picker!\u003c/button\u003e\n      \u003c/DateRangePicker\u003e\n    );\n  }\n}\n```\n\n## Documentation\n\nFor in depth documentation, see the original\n[bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) project page.\n\nYou can pass all the settings from the original plugin to the `initialSettings` prop:\n\n- **\u0026lt;input\u0026gt;, alwaysShowCalendars, applyButtonClasses, applyClass,\n  autoApply, autoUpdateInput, buttonClasses, cancelButtonClasses, cancelClass,\n  dateLimit, drops, endDate, isCustomDate, isInvalidDate, linkedCalendars,\n  locale, maxDate, maxSpan, maxYear, minDate, minYear, moment, opens, parentEl,\n  ranges, showCustomRangeLabel, showDropdowns, showISOWeekNumbers,\n  showWeekNumbers, singleDatePicker, startDate, template, timePicker,\n  timePicker24Hour, timePickerIncrement, timePickerSeconds**\n\nYou can listen to the following 8 events:\n\n- **onShow**: `callback(event, picker)` thrown when the widget is shown\n- **onHide**: `callback(event, picker)` thrown when the widget is hidden\n- **onShowCalendar**: `callback(event, picker)` thrown when the calendar is shown\n- **onHideCalendar**: `callback(event, picker)` thrown when the calendar is hidden\n- **onApply**: `callback(event, picker)` thrown when the apply button is clicked\n- **onCancel**: `callback(event, picker)` thrown when the cancel button is clicked\n- **onEvent**: `callback(event, picker)` thrown when any of the 6 events above are triggered\n- **onCallback**: `callback(start, end, label)` thrown when the start/end dates change\n\nYou MUST pass a single child element to the `\u003cDateRangePicker /\u003e` component- and it MUST be a DOM element.\nPassing custom react components is not currently supported b/c this lib needs a single dom node to initialize.\n\nNOTE: This component should be used as an [Uncontrolled Component](https://reactjs.org/docs/uncontrolled-components.html). If you try\nto control the value of your child `\u003cinput /\u003e`, then you will probably encounter issues.\n\nThere are 2 methods from the upstream lib that can be called: `setStartDate` and `setEndDate`, but you need to use refs when doing so.\nPlease view the storybook for an example of this.\n\n### Examples\n\nFor more usage examples, please view the storybook:  \nhttps://projects.skratchdot.com/react-bootstrap-daterangepicker/\n\n#### Simple button example\n\n```javascript\n\u003cDateRangePicker\u003e\n  \u003cbutton type=\"button\" className=\"btn btn-primary\"\u003e\n    click to open\n  \u003c/button\u003e\n\u003c/DateRangePicker\u003e\n```\n\n#### Simple input example\n\n```javascript\n\u003cDateRangePicker\u003e\n  \u003cinput type=\"text\" className=\"form-control\" /\u003e\n\u003c/DateRangePicker\u003e\n```\n\n#### Initialize with a startDate and endDate\n\n```javascript\n\u003cDateRangePicker\n  initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}\n\u003e\n  \u003cinput type=\"text\" className=\"form-control\" /\u003e\n\u003c/DateRangePicker\u003e\n```\n\n#### Example event handler:\n\n```javascript\nclass SomeReactComponent extends React.Component {\n  handleEvent(event, picker) {\n    console.log(picker.startDate);\n  }\n  handleCallback(start, end, label) {\n    console.log(start, end, label);\n  }\n  render() {\n    return (\n      \u003cDateRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}\u003e\n        \u003cinput /\u003e\n      \u003c/DateRangePicker\u003e;\n  }\n}\n```\n\n## Release Notes\n\nRelease notes can be found in the\n[Changelog](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md).\n\n## Links\n\n- [Source Code](https://github.com/skratchdot/react-bootstrap-daterangepicker)\n- [Changelog](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md)\n- [Live Demo](http://projects.skratchdot.com/react-bootstrap-daterangepicker/)\n- [Original Plugin](https://github.com/dangrossman/bootstrap-daterangepicker)\n\n## Other React Date Pickers\n\n- [react-date-range](https://github.com/Adphorus/react-date-range)\n- [react-dates](https://github.com/airbnb/react-dates)\n- [react-datepicker](https://github.com/Hacker0x01/react-datepicker)\n- [react-datetimerange-picker](https://github.com/wojtekmaj/react-datetimerange-picker)\n\n**NOTE: Please submit a PR if there are other date pickers you can recommend**\n\n## License\n\nCopyright (c) 2014 skratchdot  \nUses the original [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskratchdot%2Freact-bootstrap-daterangepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskratchdot%2Freact-bootstrap-daterangepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskratchdot%2Freact-bootstrap-daterangepicker/lists"}