{"id":13422055,"url":"https://github.com/almogtavor/date-range-picker","last_synced_at":"2025-08-15T11:55:47.896Z","repository":{"id":39008968,"uuid":"289532464","full_name":"almogtavor/date-range-picker","owner":"almogtavor","description":"⚛️📆 Flexible React date range picker calendar with no dependencies.","archived":false,"fork":false,"pushed_at":"2023-12-30T13:55:35.000Z","size":2576,"stargazers_count":104,"open_issues_count":7,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-27T22:31:15.010Z","etag":null,"topics":["calendar","dependency-less","javascript","picker-calendar","range-picker","react","react-component","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://almogtavor.github.io/date-range-picker/","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/almogtavor.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-22T17:12:21.000Z","updated_at":"2024-10-16T15:33:37.000Z","dependencies_parsed_at":"2024-01-25T04:47:42.046Z","dependency_job_id":"81669b9a-aa87-46bd-aaf5-158b16485381","html_url":"https://github.com/almogtavor/date-range-picker","commit_stats":{"total_commits":270,"total_committers":3,"mean_commits":90.0,"dds":0.337037037037037,"last_synced_commit":"de43df84ae08cb5992869191de9e21c173be78f4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almogtavor%2Fdate-range-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almogtavor%2Fdate-range-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almogtavor%2Fdate-range-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/almogtavor%2Fdate-range-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/almogtavor","download_url":"https://codeload.github.com/almogtavor/date-range-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719104,"owners_count":20336591,"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","dependency-less","javascript","picker-calendar","range-picker","react","react-component","react-hooks","reactjs"],"created_at":"2024-07-30T23:00:36.318Z","updated_at":"2025-03-15T10:31:38.018Z","avatar_url":"https://github.com/almogtavor.png","language":"JavaScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003cbr\u003e\n\t\u003ca href=\"https://almogtavor.github.io/date-range-picker\"\u003e\n\t\t\u003cimg src=\"images/../src/images/title.svg\" width=\"800\" height=\"400\" alt=\"Click for Demo\"\u003e\n\t\u003c/a\u003e\n\t\u003cbr\u003e\n\u003c/div\u003e\n\n\u003csup\u003e\n    \u003cbr /\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href=\"https://www.npmjs.com/package/dates-picker\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/badge/v1.0.3-npm-orange\"\u003e\u003c/a\u003e\n  \u003cp align='center'\u003e⚛️📆 Flexible React date range picker calendar with no dependencies\u003c/p\u003e\n\u003c/p\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n\u003c/sup\u003e\n\n![Example Image](public/example-image1.png)\n\n## Demo\n\nDemo page at \u003chttps://almogtavor.github.io/date-range-picker/\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eRead More\u003c/summary\u003e\n  \n## Main Features\n\n* Pick method - an option of configuring the component to be date picker, range picker, or ranges picker.\n* Days amount tab - an option of selecting a number of days backward from the current date immediately by choosing a number.\n* Colors palette - an option of determining the component's color (can be disabled removed).\n* Language - English and Hebrew support.\n* Select all button - an option of selecting all of the current board's dates. Whether viewing dates, months, or years.\n* Boards number - an option of configuring components to be in one board or two boards.\n\n## Installation\n\n```sh\n$ npm i dates-picker\n```\n\n## Usage\n\n```javascript\nfunction callbackFunction(dates) {\n    console.log(`The range of dates that got picked is: ${dates.text}`);\n    console.log(`The min date that got picked is: ${dates.minDate}`);\n    console.log(`The max date that got picked is: ${dates.maxDate}`);\n    console.log(`The number of days that got picked is: ${dates.numberOfDaysPicked}`);\n    console.log(`All dates: ${dates.allDates}`);\n}\n\nfunction MyComponent() {\n    return (\n      \u003cDateRangePicker \n        callback={callbackFunction}\n      /\u003e\n    )\n  }\n}\n```\n\n## Options\n\nProperty                             | Type      | Allowed Values   | Default Value        | Description\n-------------------------------------|-----------|------------------|----------------------|-----------------------------------------------\nlanguage                             | String    | `English`, `Hebrew` | `English`        | component's language. currently support English and Hebrew. Notice Languages such Hebrew changes the whole component from left to right to right to left.\ncolorsPalette                        | String    | `enabled`, `disabled` | `enabled` | by enabling colors palette you can choose the component's color.\nformat                               | String    | any combination of 2 Ds, 2 Ms and 2\\4 Ys with other | `DD-MM-YYYY` | the format of the dates.\nselectAllButton                        | String    | `enabled`, `disabled` | `enabled`| depends on current board's view (dates, months, or years), select all enabled items.\nstartDate                        | date | date object | `new Date(1900, 0, 0)` | calendar's start date.\nendDate                        | date | date object | `new Date(2025, 0, 0)` | calendar's end date.\nfirstDayOfWeekIndex                        | int    | 0 - 6 | 0 (sunday) | first day of the week (etc monday, sunday).\npickMethod                        | String    | `date`, `range`, `ranges` | `range` | date means picking one day (on one board). range is to peak dates two dates. ranges is to pick an array of ranges (with view option on hover).\ndefaultColor                        | String    | any color format item | `#2196f3` | default component's color. becomes the first option on colors palette.\ndaysAmountTab                        | String    | `enabled`, `disabled` | `disabled` | by enabling, there will be a button on the left that you can open and choose prepared range, or days amount up to today.\nboardsNum                        | int  | 1, 2 | 2 | by specifing you can choose the component's boards number.\n\n## Future Plans\n\n* Add simple and intuitive time picker option (by list\\ or visual clock\\ both).\n* Tooltips for buttons explanation (for example on select all button).\n* On non-component-screen click, close component.\n* Go back button on non-dates mode (or on all modes for previous). When the user is in month's or year's mode, add an option to return to dates mode without choosing any value.\n* Component \u0026 button sizes parameters\n* Border radius parameter\n* An option to cancel picked range from the input label\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falmogtavor%2Fdate-range-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falmogtavor%2Fdate-range-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falmogtavor%2Fdate-range-picker/lists"}