{"id":27356450,"url":"https://github.com/onesine/react-tailwindcss-datepicker","last_synced_at":"2025-04-29T14:29:41.849Z","repository":{"id":63364551,"uuid":"566464938","full_name":"onesine/react-tailwindcss-datepicker","owner":"onesine","description":"Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.","archived":false,"fork":false,"pushed_at":"2025-02-04T21:08:19.000Z","size":1210,"stargazers_count":586,"open_issues_count":125,"forks_count":197,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-20T09:53:48.879Z","etag":null,"topics":["date","datepicker","daterange","daterangepicker","react-datepicker","react-tailwind-datepicker","tailwind-datepicker"],"latest_commit_sha":null,"homepage":"https://react-tailwindcss-datepicker.vercel.app/","language":"TypeScript","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/onesine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-15T18:22:14.000Z","updated_at":"2025-04-10T19:15:52.000Z","dependencies_parsed_at":"2024-06-18T12:38:25.102Z","dependency_job_id":"f4e144b6-8a03-4a2f-97ab-11a835995219","html_url":"https://github.com/onesine/react-tailwindcss-datepicker","commit_stats":{"total_commits":233,"total_committers":26,"mean_commits":8.961538461538462,"dds":0.5407725321888412,"last_synced_commit":"766ad8201600973af17c1726756a8df8a80ec9e9"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onesine","download_url":"https://codeload.github.com/onesine/react-tailwindcss-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251518463,"owners_count":21602151,"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":["date","datepicker","daterange","daterangepicker","react-datepicker","react-tailwind-datepicker","tailwind-datepicker"],"created_at":"2025-04-12T23:16:45.166Z","updated_at":"2025-04-29T14:29:41.821Z","avatar_url":"https://github.com/onesine.png","language":"TypeScript","readme":"# React Tailwindcss Datepicker\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://react-tailwindcss-datepicker.vercel.app/\" target=\"_blank\"\u003e\n      \u003cimg alt=\"React Tailwindcss Datepicker\" width=\"100\" style=\"border-radius: 100%;\" src=\"https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/calendar_logo.svg?raw=true\"\u003e\n    \u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\n    A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \n[![npm version](https://img.shields.io/npm/v/react-tailwindcss-datepicker?style=flat-square)](https://www.npmjs.com/package/react-tailwindcss-datepicker)\n[![npm downloads](https://img.shields.io/npm/dt/react-tailwindcss-datepicker?style=flat-square)](https://www.npmjs.com/package/react-tailwindcss-datepicker)\n    \n\u003c/div\u003e\n\n## Contents\n\n-   [Features](#features)\n-   [Documentation](#documentation)\n-   [Supported versions](#-supported-versions)\n-   [Installation](#installation)\n-   [Simple Usage](#simple-usage)\n-   [Theming Options](#theming-options)\n-   [Playground](#playground)\n-   [Contributing](#contributing)\n\n## Features\n\n-   ✅ Theming options\n-   ✅ Dark mode\n-   ✅ Single Date\n-   ✅ Single date use Range\n-   ✅ Shortcuts\n-   ✅ TypeScript support\n-   ✅ Localization(i18n)\n-   ✅ Date formatting\n-   ✅ Disable specific dates\n-   ✅ Minimum Date and Maximum Date\n-   ✅ Custom shortcuts\n\n## Documentation\n\nGo to [full documentation](https://react-tailwindcss-datepicker.vercel.app/)\n\n## ⚠️ Supported versions\n\nOnly **react-tailwindcss-datepicker** versions greater than or equal to **1.7.4** receive bug fixes and new features. The table below lists compatibility with the different **react** versions:\n\n| Version                                                                    | React Version |\n|----------------------------------------------------------------------------|---------------|\n| [2.x](https://github.com/onesine/react-tailwindcss-datepicker/tree/v2.0.0) | 19.x          |\n| [1.x](https://github.com/onesine/react-tailwindcss-datepicker/tree/v1.7.3) | 17.x, 18.x    |\n\n## Installation\n\nReact Tailwindcss Datepicker uses Tailwind CSS 3 (with the\n[@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) \u0026\n[Dayjs](https://day.js.org/en/) under the hood to work.\n\n### Install via npm\n\n```\nnpm install react-tailwindcss-datepicker\n```\n\n### Install via yarn\n\n```\nyarn add react-tailwindcss-datepicker\n```\n\n### Install for react 18 project\n\n```\nyarn add react-tailwindcss-datepicker@1.7.3\n```\n\nMake sure you have installed the peer dependencies as well with the below versions.\n\n```\n\"dayjs\": \"^1.11.12\",\n\"react\": \"^17.0.2 || ^18.2.0\" || \"^19.0.0\"\n```\n\n## Simple Usage\n\n#### Tailwindcss Configuration\n\nAdd the datepicker to your tailwind configuration using this code\n\n```javascript\n// in your tailwind.config.js\nmodule.exports = {\n    // ...\n    content: [\n        \"./src/**/*.{js,jsx,ts,tsx}\",\n        \"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js\"\n    ]\n    // ...\n};\n```\n\nThen use react-tailwindcss-select in your app:\n\n```tsx\nimport { useState } from \"react\";\nimport Datepicker from \"react-tailwindcss-datepicker\";\n\nconst App = () =\u003e {\n    const [value, setValue] = useState({\n        startDate: null,\n        endDate: null\n    });\n\n    return (\n        \u003c\u003e\n            \u003cDatepicker value={value} onChange={newValue =\u003e setValue(newValue)} /\u003e\n        \u003c/\u003e\n    );\n};\n\nexport default App;\n```\n\n## Theming options\n\n**Light Mode**\n\n![Light Mode](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_light.png?raw=true)\n\n**Dark Mode**\n\n![Dark Mode](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_dark.png?raw=true)\n\n**Supported themes**\n![Theme supported](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_theme.png?raw=true)\n\n**Teal themes example**\n![Theme supported](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_teal.png?raw=true)\n\nYou can find the demo at [here](https://react-tailwindcss-datepicker.vercel.app/demo)\n\n\u003e **Info**\n\u003e\n\u003e 👉 To discover the other possibilities offered by this library, you can consult the\n\u003e [full documentation](https://react-tailwindcss-datepicker.vercel.app/).\n\n## PlayGround\n\nClone the `master` branch and run commands:\n\n```sh\n# Using npm\nnpm install \u0026\u0026 npm dev\n\n# Using yarn\nyarn install \u0026\u0026 yarn dev\n\n```\n\nOpen a browser and navigate to `http://localhost:8888`\n\n## Contributing\n\nSee\n[CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)\n\n## Official Documentation repo\n\n[https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc)\n\n## Thanks to\n\n-   [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)\n-   [React](https://reactjs.org/)\n-   [Tailwind CSS](https://tailwindcss.com/)\n-   [dayjs](https://day.js.org/)\n\nI thank you in advance for your contribution to this project.\n\n## License\n\n[MIT](LICENSE) Licensed. Copyright (c) Lewhe Onesine 2022.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesine%2Freact-tailwindcss-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonesine%2Freact-tailwindcss-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesine%2Freact-tailwindcss-datepicker/lists"}