{"id":26107133,"url":"https://github.com/omikkel/tailwind-datepicker-react","last_synced_at":"2025-03-31T04:04:31.494Z","repository":{"id":60794240,"uuid":"544997304","full_name":"OMikkel/tailwind-datepicker-react","owner":"OMikkel","description":"A tailwindcss/flowbite datepicker component built as a react component with types","archived":false,"fork":false,"pushed_at":"2024-07-11T00:37:55.000Z","size":1648,"stargazers_count":161,"open_issues_count":37,"forks_count":74,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T04:04:19.737Z","etag":null,"topics":["datepicker","flowbite","nextjs","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://omikkel.github.io/tailwind-datepicker-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mymth/vanillajs-datepicker","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OMikkel.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-10-03T15:50:43.000Z","updated_at":"2024-12-10T01:02:20.000Z","dependencies_parsed_at":"2024-06-18T23:01:18.143Z","dependency_job_id":"696199aa-9472-427e-9f71-076350fa9ce4","html_url":"https://github.com/OMikkel/tailwind-datepicker-react","commit_stats":{"total_commits":146,"total_committers":28,"mean_commits":5.214285714285714,"dds":0.5410958904109588,"last_synced_commit":"7eee201ef25a2dc568c1327755c1c6a59c44f615"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ftailwind-datepicker-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ftailwind-datepicker-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ftailwind-datepicker-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ftailwind-datepicker-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OMikkel","download_url":"https://codeload.github.com/OMikkel/tailwind-datepicker-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413231,"owners_count":20773053,"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":["datepicker","flowbite","nextjs","react","tailwindcss"],"created_at":"2025-03-09T22:43:25.777Z","updated_at":"2025-03-31T04:04:31.466Z","avatar_url":"https://github.com/OMikkel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM Version](https://img.shields.io/npm/v/tailwind-datepicker-react?color=green)](https://www.npmjs.com/package/tailwind-datepicker-react)\n[![NPM Minified Size](https://img.shields.io/bundlephobia/min/tailwind-datepicker-react)](https://www.npmjs.com/package/tailwind-datepicker-react)\n[![GitHub deployments](https://img.shields.io/github/deployments/OMikkel/tailwind-datepicker-react/github-pages?label=Demo%20Website%20Deployment)](https://omikkel.github.io/tailwind-datepicker-react/)\n\n# Tailwind-datepicker-react\n\nA Tailwindcss/Flowbite datepicker component built as a React component with types based on the [original datepicker from Flowbite](https://flowbite.com/docs/plugins/datepicker/). This component can also be used as a plugin using the [Flowbite React](https://github.com/themesberg/flowbite-react) library.\n\nDate logic from [VanillaJS-datepicker](https://github.com/mymth/vanillajs-datepicker).\n\n## [Demo](https://omikkel.github.io/tailwind-datepicker-react/)\n\n![thumbnail](https://i.imgur.com/k6gVad8.png)\n\n## Installation\n\n1. Install the package\n\n```bash\nnpm install tailwind-datepicker-react\n```\n\n```bash\nyarn add tailwind-datepicker-react\n```\n\n2. Add the styles to your `tailwind.config.js` file\n\n```js\nmodule.exports = {\n    ...\n    content: [\n        ...\n        \"./node_modules/tailwind-datepicker-react/dist/**/*.js\", // \u003c--- Add this line\n    ],\n\n};\n\n```\n\n3. Import the component and use it\n\n```js\nimport Datepicker from \"tailwind-datepicker-react\"\n```\n\n## Usage\n\n### Basic\n\n```jsx\nconst options = {\n\ttitle: \"Demo Title\",\n\tautoHide: true,\n\ttodayBtn: false,\n\tclearBtn: true,\n\tclearBtnText: \"Clear\",\n\tmaxDate: new Date(\"2030-01-01\"),\n\tminDate: new Date(\"1950-01-01\"),\n\ttheme: {\n\t\tbackground: \"bg-gray-700 dark:bg-gray-800\",\n\t\ttodayBtn: \"\",\n\t\tclearBtn: \"\",\n\t\ticons: \"\",\n\t\ttext: \"\",\n\t\tdisabledText: \"bg-red-500\",\n\t\tinput: \"\",\n\t\tinputIcon: \"\",\n\t\tselected: \"\",\n\t},\n\ticons: {\n\t\t// () =\u003e ReactElement | JSX.Element\n\t\tprev: () =\u003e \u003cspan\u003ePrevious\u003c/span\u003e,\n\t\tnext: () =\u003e \u003cspan\u003eNext\u003c/span\u003e,\n\t},\n\tdatepickerClassNames: \"top-12\",\n\tdefaultDate: new Date(\"2022-01-01\"),\n\tlanguage: \"en\",\n\tdisabledDates: [],\n\tweekDays: [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"],\n\tinputNameProp: \"date\",\n\tinputIdProp: \"date\",\n\tinputPlaceholderProp: \"Select Date\",\n\tinputDateFormatProp: {\n\t\tday: \"numeric\",\n\t\tmonth: \"long\",\n\t\tyear: \"numeric\"\n\t}\n}\n\nconst DemoComponent = () =\u003e {\n\tconst [show, setShow] = useState \u003c boolean \u003e false\n\tconst handleChange = (selectedDate: Date) =\u003e {\n\t\tconsole.log(selectedDate)\n\t}\n\tconst handleClose = (state: boolean) =\u003e {\n\t\tsetShow(state)\n\t}\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cDatepicker options={options} onChange={handleChange} show={show} setShow={handleClose} /\u003e\n\t\t\u003c/div\u003e\n\t)\n}\n```\n\n### Advanced - Custom input field\n\n```jsx\nconst options = {\n\ttitle: \"Demo Title\",\n\tautoHide: true,\n\ttodayBtn: false,\n\tclearBtn: true,\n\tclearBtnText: \"Clear\",\n\tmaxDate: new Date(\"2030-01-01\"),\n\tminDate: new Date(\"1950-01-01\"),\n\ttheme: {\n\t\tbackground: \"bg-gray-700 dark:bg-gray-800\",\n\t\ttodayBtn: \"\",\n\t\tclearBtn: \"\",\n\t\ticons: \"\",\n\t\ttext: \"\",\n\t\tdisabledText: \"bg-red-500\",\n\t\tinput: \"\",\n\t\tinputIcon: \"\",\n\t\tselected: \"\",\n\t},\n\ticons: {\n\t\t// () =\u003e ReactElement | JSX.Element\n\t\tprev: () =\u003e \u003cspan\u003ePrevious\u003c/span\u003e,\n\t\tnext: () =\u003e \u003cspan\u003eNext\u003c/span\u003e,\n\t},\n\tdatepickerClassNames: \"top-12\",\n\tdefaultDate: new Date(\"2022-01-01\"),\n\tlanguage: \"en\",\n\tdisabledDates: [],\n\tweekDays: [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"],\n\tinputNameProp: \"date\",\n\tinputIdProp: \"date\",\n\tinputPlaceholderProp: \"Select Date\",\n\tinputDateFormatProp: {\n\t\tday: \"numeric\",\n\t\tmonth: \"long\",\n\t\tyear: \"numeric\"\n\t}\n}\n\nconst DemoComponent = () =\u003e {\n\tconst [show, setShow] = useState \u003c boolean \u003e false\n\tconst [selectedDate, setSelectedDate] = (useState \u003c Date) | (null \u003e null)\n\tconst handleChange = (selectedDate: Date) =\u003e {\n\t\tsetSelectedDate(selectedDate)\n\t\tconsole.log(selectedDate)\n\t}\n\tconst handleClose = (state: boolean) =\u003e {\n\t\tsetShow(state)\n\t}\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cDatepicker options={options} onChange={handleChange} show={show} setShow={handleClose}\u003e\n\t\t\t\t\u003cdiv className=\"...\"\u003e\n\t\t\t\t\t\u003cdiv className=\"...\"\u003e\n\t\t\t\t\t\t\u003cCalendarIcon /\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003cinput type=\"text\" className=\"...\" placeholder=\"Select Date\" value={selectedDate} onFocus={() =\u003e setShow(true)} readOnly /\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/Datepicker\u003e\n\t\t\u003c/div\u003e\n\t)\n}\n```\n\n### DatePicker Props\n\n- children?: ReactElement\n- value?: Date\n- options?: [IOptions](###IOptions)\n- onChange?: (date: Date) =\u003e void\n- show: boolean\n- setShow: (show: boolean) =\u003e void\n- classNames?: string\n\n### IOptions\n\n- title?: string - Default: `disabled`\n- autoHide?: boolean - Default: `true`\n- todayBtn?: boolean - Default: `true`\n- todayBtnText?: string - Default: `Today`\n- clearBtn?: boolean - Default: `true`\n- clearBtnText?: string - Default: `Clear`\n- maxDate?: Date - Default: `disabled`\n- minDate?: Date - Default: `disabled`\n- theme?: [ITheme](###ITheme) - Default: `As seen on demo page`\n- icons?: [IIcons](###IIcons) - Default: `As seen on demo page`\n- datepickerClassNames?: string - Default: `\"\"`\n- defaultDate?: false|Date - Default: `new Date()`\n- language?: string - Default: `en`\n- disabledDates?: Date[] - Default: `[]`\n- weekDays?: string[] - Default: `[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"] - Start at Monday even with another language`\n- inputNameProp?: string - Default: `date`\n- inputIdProp?: string - Default: `Same as \"inputNameProp\"`\n- inputPlaceholderProp?: string - Default: `Select Date`\n- inputDateFormatProp?: [Intl.DateTimeFormatOptions](https://devhints.io/wip/intl-datetime) - Default: `{day: \"numeric\", month: \"long\", year: \"numeric\"}`\n\n### ITheme\n\n- background: string\n- todayBtn: string\n- clearBtn: string\n- icons: string\n- text: string\n- disabledText: string\n- input: string\n- inputIcon: string\n- selected: string\n\n### IIcons\n\n- prev: () =\u003e ReactNode | JSX.Element\n- next: () =\u003e ReactNode | JSX.Element\n\n### License\n\nThis project is open-source under the [MIT License](https://github.com/OMikkel/tailwind-datepicker-react/blob/master/LICENSE.md).\n\n## Contributing\n\nAfter clone, you can run (separated):\n\n* `yarn run dev` to start building with [Nodemon](https://github.com/remy/nodemon).\n* `cd demo-app/ \u0026\u0026 npm run dev` to start [Demo App](http://localhost:3000/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomikkel%2Ftailwind-datepicker-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomikkel%2Ftailwind-datepicker-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomikkel%2Ftailwind-datepicker-react/lists"}