{"id":13422318,"url":"https://github.com/hiwllc/datepicker","last_synced_at":"2026-03-12T01:53:06.497Z","repository":{"id":37424328,"uuid":"425142494","full_name":"hiwllc/datepicker","owner":"hiwllc","description":"A simple datepicker with Chakra-UI and date-fns","archived":false,"fork":false,"pushed_at":"2024-08-01T00:55:18.000Z","size":1103,"stargazers_count":193,"open_issues_count":3,"forks_count":26,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-16T16:38:42.315Z","etag":null,"topics":["chakra-ui","date-fns","datepicker","react"],"latest_commit_sha":null,"homepage":"https://uselessdev-datepicker.netlify.app","language":"TypeScript","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/hiwllc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-06T03:02:22.000Z","updated_at":"2025-01-29T15:24:28.000Z","dependencies_parsed_at":"2024-01-16T00:18:56.101Z","dependency_job_id":"8b01ca53-d95c-4de6-9f6b-9805ba94c93c","html_url":"https://github.com/hiwllc/datepicker","commit_stats":null,"previous_names":["hiwllc/datepicker","uselessdev/datepicker"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/hiwllc/datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiwllc%2Fdatepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiwllc%2Fdatepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiwllc%2Fdatepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiwllc%2Fdatepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiwllc","download_url":"https://codeload.github.com/hiwllc/datepicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiwllc%2Fdatepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30412106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"ssl_error","status_checked_at":"2026-03-12T00:40:08.439Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["chakra-ui","date-fns","datepicker","react"],"created_at":"2024-07-30T23:00:41.524Z","updated_at":"2026-03-12T01:53:06.463Z","avatar_url":"https://github.com/hiwllc.png","language":"TypeScript","funding_links":[],"categories":["🛠️ Tools"],"sub_categories":[],"readme":"# Datepicker\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nA simple datepicker component build with [date-fns][1] and [Chakra-UI][2].\n\n## Table of Contents\n\n- [Requisites](#requisites)\n- [Installation and Usage](#installation-and-usage)\n- [Customizing](#customizing)\n- [License](#license)\n\n## Requisites\nYou need to install [date-fns][1] and [chakra-ui][2] in order to use this library.\n\n```bash\nyarn add date-fns\n```\n\nTo install chakra-ui follow their [guide here](https://chakra-ui.com/guides/first-steps#framework-guide).\n\n## Installation and Usage\nAfter install these dependencies you can now install the library and use this as below:\n\n```bash\nyarn add @uselessdev/datepicker\n```\n\nBefore to use this you can create your own theme or use the default one.\n\n```tsx\nimport { ChakraProvider } from '@chakra-ui/react'\nimport {\n  Calendar,\n  CalendarDefaultTheme,\n  CalendarControls,\n  CalendarPrevButton,\n  CalendarNextButton,\n  CalendarMonths,\n  CalendarMonth,\n  CalendarMonthName,\n  CalendarWeek,\n  CalendarDays,\n} from '@uselessdev/datepicker'\n\nexport function App() {\n  const [dates, setDates] = useState()\n\n  const handleSelectDate = (values) =\u003e setDates(values)\n\n  return (\n    return (\n      \u003cChakraProvider theme={CalendarDefaultTheme}\u003e\n        \u003cCalendar value={dates} onSelectDate={handleSelectDate}\u003e\n          \u003cCalendarControls\u003e\n            \u003cCalendarPrevButton /\u003e\n            \u003cCalendarNextButton /\u003e\n          \u003c/CalendarControls\u003e\n\n          \u003cCalendarMonths\u003e\n            \u003cCalendarMonth\u003e\n              \u003cCalendarMonthName /\u003e\n              \u003cCalendarWeek /\u003e\n              \u003cCalendarDays /\u003e\n            \u003c/CalendarMonth\u003e\n          \u003c/CalendarMonths\u003e\n        \u003c/Calendar\u003e\n      \u003c/ChakraProvider\u003e\n    )\n  )\n}\n```\n\n**note that the example above doens't render an input but only the calendar**\n\nIf you want to use this with inputs and a popover [you can see this example](https://uselessdev-datepicker.netlify.app/?path=/story/calendar--with-input-popover-start-end-dates)\n\n### Customizing\nYou can fully customize the Calendar component using the `extendTheme` provided by chakra-ui, you can see an example below.\n\nIn your theme you can overrides the default theme (you can see all available components keys for theme customization here)\n\n```ts\nimport { extendTheme } from '@chakra-ui/react'\nimport { CalendarDefaultTheme } from '@uselessdev/datepicker'\n\nexport const theme = extendTheme(CalendarDefaultTheme, {\n  components: {\n    Calendar: {\n      parts: ['calendar'],\n\n      baseStyle: {\n        calendar: {\n          borderWidth: '6px',\n          borderColor: 'pink.400',\n          rounded: 'none',\n          shadow: 'none',\n          boxShadow: '32px 16px 0 6px #3B4DCC'\n        },\n      },\n    },\n\n    CalendarControl: {\n      parts: ['button'],\n\n      baseStyle: {\n        button: {\n          h: 6,\n          px: 2,\n          rounded: 'none',\n          fontSize: 'sm',\n          color: 'white',\n          bgColor: 'pink.400',\n\n          _hover: {\n            bgColor: 'pink.200',\n          },\n\n          _focus: {\n            outline: 'none',\n          },\n        },\n      },\n    }\n  },\n})\n```\n\nNow you can use this theme in `ChakraProvider`:\n\n```tsx\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { theme } from './theme'\n\nfunction App() {\n  return (\n    \u003cChakraProvider theme={theme}\u003e\n      {/* children... */}\n    \u003c/ChakraProvider\u003e\n  )\n}\n```\n\nTheses changes will produce the following results in Calendar:\n\n![Customized calendar](docs/datepicker-custom.png)\n\n## Available components theme keys\n\n| Key name        | Description                                                               | Parts                                    |\n|-----------------|---------------------------------------------------------------------------|------------------------------------------|\n| Calendar        | A multipart component this is reponsible for the calendar it self.        |`calendar`, `months`                      |\n| CalendarMonth   | Responsible to style one month block.                                     |`month`, `name`, `week`, `weekday`, `days`|\n| CalendarDay     | Applies styles to individual day. This is the only single part component. | --                                       |\n| CalendarControl | Applies styles to prev and next months.                                   |`controls`, `button`                      |\n\n## License\nThis code is under the [Apache-2.0](LICENSE) License\n\n[1]: https://date-fns.org/\n[2]: https://chakra-ui.com/\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://iamwallace.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6943919?v=4?s=100\" width=\"100px;\" alt=\"Wallace Batista\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWallace Batista\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=uselessdev\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-uselessdev\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://htttp://www.leonardoelias.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1995213?v=4?s=100\" width=\"100px;\" alt=\"Leonardo Elias\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLeonardo Elias\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=leonardoelias\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/kivi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/366163?v=4?s=100\" width=\"100px;\" alt=\"kivi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekivi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=kivi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://guiteixeira.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/24235344?v=4?s=100\" width=\"100px;\" alt=\"Guilherme Teixeira \"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGuilherme Teixeira \u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=ggteixeira\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/branislaav\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10597602?v=4?s=100\" width=\"100px;\" alt=\"Brano Zavracky\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrano Zavracky\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=branislaav\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://pixel.is-a.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/69857856?v=4?s=100\" width=\"100px;\" alt=\"O. Qudah\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eO. Qudah\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=BasicPixel\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://medium.com/@tomchentw\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/922234?v=4?s=100\" width=\"100px;\" alt=\"Tom Chen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTom Chen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=tomchentw\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=tomchentw\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/astahmer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/47224540?v=4?s=100\" width=\"100px;\" alt=\"Alexandre Stahmer\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexandre Stahmer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=astahmer\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/raphaelrochap\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/21209032?v=4?s=100\" width=\"100px;\" alt=\"Raphael da Rocha Pinto Barboza\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRaphael da Rocha Pinto Barboza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=raphaelrochap\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://gleu.ch\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9039?v=4?s=100\" width=\"100px;\" alt=\"Greg Leuch\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGreg Leuch\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uselessdev/datepicker/commits?author=gleuch\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiwllc%2Fdatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiwllc%2Fdatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiwllc%2Fdatepicker/lists"}