{"id":16714551,"url":"https://github.com/t0gre/react-datepicker","last_synced_at":"2025-04-05T13:08:07.634Z","repository":{"id":40511146,"uuid":"177590445","full_name":"t0gre/react-datepicker","owner":"t0gre","description":"An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.","archived":false,"fork":false,"pushed_at":"2024-01-21T18:33:17.000Z","size":5608,"stargazers_count":331,"open_issues_count":44,"forks_count":54,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-04T19:42:12.117Z","etag":null,"topics":["datepicker","grid","i18n","react","react-hooks","rtl","styled-components","styled-system","typescript"],"latest_commit_sha":null,"homepage":"https://react-datepicker.netlify.com/","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/t0gre.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-25T13:19:45.000Z","updated_at":"2025-03-03T19:09:07.000Z","dependencies_parsed_at":"2024-01-29T00:07:04.128Z","dependency_job_id":null,"html_url":"https://github.com/t0gre/react-datepicker","commit_stats":{"total_commits":302,"total_committers":21,"mean_commits":"14.380952380952381","dds":0.543046357615894,"last_synced_commit":"ad472f6bc50a55daa662aee3e31df7486a3ac0ec"},"previous_names":["tresko/react-datepicker"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t0gre%2Freact-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t0gre%2Freact-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t0gre%2Freact-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t0gre%2Freact-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t0gre","download_url":"https://codeload.github.com/t0gre/react-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"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","grid","i18n","react","react-hooks","rtl","styled-components","styled-system","typescript"],"created_at":"2024-10-12T21:05:44.331Z","updated_at":"2025-04-05T13:08:07.614Z","avatar_url":"https://github.com/t0gre.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/T1Eu7XSoF"],"categories":["JavaScript"],"sub_categories":[],"readme":"# @datepicker-react/styled\n\n[![Gzip size](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)\n[![Coverage Status](https://coveralls.io/repos/github/tresko/react-datepicker/badge.svg?branch=master)](https://coveralls.io/github/tresko/react-datepicker?branch=master)\n[![Build Status](https://travis-ci.org/tresko/react-datepicker.svg?branch=master)](https://travis-ci.org/tresko/react-datepicker)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/9b144788-65aa-4c1d-9748-75200d5a7fb7/deploy-status)](https://app.netlify.com/sites/datepicker-react/deploys)\n\n[![NPM](https://nodei.co/npm/@datepicker-react/styled.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/@datepicker-react/styled?downloads=true\u0026downloadRank=true\u0026stars=true)\n\n\u003e An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build\n\u003e with styled-components.\n\n## N.B. this project is looking for a new maintainer. I do not have time to maintain it unfortunately. If anyone would like to take it over please file and issue saying you'd like to take it\nover and I will transfer it to you.\n\n![example](./docs/datepicker.gif)\n\n## How to build your own datepicker?\n\nSimple. Use\n[React hooks (@datepicker-react/hooks)](https://github.com/tresko/react-datepicker/tree/master/packages/hooks).\n\n## Live Playground\n\nFor examples of the datepicker in action, go to https://datepicker-react.netlify.com/.\n\nOR\n\nTo run that demo on your own computer:\n\n- Clone this repository\n- `yarn install \u0026\u0026 yarn bootstrap`\n- `yarn storybook`\n- Visit http://localhost:6006/\n\n## Getting Started\n\n### Install\n\n```sh\nyarn add @datepicker-react/styled styled-components\n```\n\n### Include component\n\n```js\nimport {DateRangeInput, DateSingleInput, Datepicker} from '@datepicker-react/styled'\n```\n\n### DateRangeInput\n\nThe `DateRangeInput` is a fully controlled component that allows users to select a date range. You\ncan control the selected dates using the `startDate`, `endDate`, and `onDatesChange` props as shown\nbelow. Similarly, you can control which input is focused as well as calendar visibility (the\ncalendar is only visible if `focusedInput` is defined) with the `focusedInput` and `onFocusChange`\nprops as shown below.\n\nHere is the minimum _REQUIRED_ setup you need to get the `DateRangeInput` working:\n\n**IE11 is not supported**\n\n```jsx\nimport React, {useReducer} from 'react'\nimport {DateRangeInput} from '@datepicker-react/styled'\n\nconst initialState = {\n  startDate: null,\n  endDate: null,\n  focusedInput: null,\n}\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'focusChange':\n      return {...state, focusedInput: action.payload}\n    case 'dateChange':\n      return action.payload\n    default:\n      throw new Error()\n  }\n}\n\nfunction App() {\n  const [state, dispatch] = useReducer(reducer, initialState)\n\n  return (\n    \u003cDateRangeInput\n      onDatesChange={data =\u003e dispatch({type: 'dateChange', payload: data})}\n      onFocusChange={focusedInput =\u003e dispatch({type: 'focusChange', payload: focusedInput})}\n      startDate={state.startDate} // Date or null\n      endDate={state.endDate} // Date or null\n      focusedInput={state.focusedInput} // START_DATE, END_DATE or null\n    /\u003e\n  )\n}\n```\n\nThe following is a list of other _OPTIONAL_ props you may provide to the `DateRangeInput` to\ncustomize appearance and behavior to your heart's desire.\n\n```ts\ndisplayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'\nphrases?: DateRangeInputPhrases\nshowStartDateCalendarIcon?: boolean // Default: true\nshowEndDateCalendarIcon?: boolean // Default: true\nonClose?(): void\nvertical?: boolean // Default: false\nshowResetDates?: boolean // Default: true\nshowSelectedDates?: boolean // Default: true\nshowClose?: boolean // Default: true\nrtl?: boolean // Default: false\nplacement?: 'top' | 'bottom' // Default: bottom\nunavailableDates?: Date[] // Default: []\nminBookingDate?: Date\nmaxBookingDate?: Date\nnumberOfMonths?: number // Default: 2\nminBookingDays?: number // Default: 1\nexactMinBookingDays?: boolean // Default: false\nfirstDayOfWeek?: FirstDayOfWeek // Default: 1\ninitialVisibleMonth?: Date\nisDateBlocked?(date: Date): boolean\ndayLabelFormat?(date: Date): string\nweekdayLabelFormat?(date: Date): string\nmonthLabelFormat?(date: Date): string\nonDayRender?(date: Date): React.ReactNode\nstartDateInputId?: string\nendDateInputId?: string\n```\n\n### Datepicker\n\nThe `Datepicker` is a fully controlled component that allows users to select a date range. You can\ncontrol the selected dates using the `startDate`, `endDate`, and `onDatesChange` props as shown\nbelow. Similarly, you can control which input is focused with the `focusedInput` prop.\n\nHere is the minimum _REQUIRED_ setup you need to get the `Datepicker` working:\n\n**IE11 is not supported**\n\n```jsx\nimport React, {useState} from 'react'\nimport {Datepicker, START_DATE} from '@datepicker-react/styled'\n\nfunction App() {\n  const [state, setState] = useState({\n    startDate: null,\n    endDate: null,\n    focusedInput: START_DATE,\n  })\n\n  function handleDatesChange(data: OnDatesChangeProps) {\n    if (!data.focusedInput) {\n      setState({...data, focusedInput: START_DATE})\n    } else {\n      setState(data)\n    }\n  }\n\n  return (\n    \u003cDatepicker\n      onDatesChange={handleDatesChange}\n      startDate={state.startDate} // Date or null\n      endDate={state.endDate} // Date or null\n      focusedInput={state.focusedInput} // START_DATE, END_DATE or null\n    /\u003e\n  )\n}\n```\n\nThe following is a list of other _OPTIONAL_ props you may provide to the `Datepicker` to customize\nappearance and behavior to your heart's desire.\n\n```ts\nphrases?: DatepickerPhrases\ndisplayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'\nonClose?(): void\nshowResetDates?: boolean // Default: true\nshowSelectedDates?: boolean // Default: true\nshowClose?: boolean // Default: true\nvertical?: boolean // Default: false\nrtl?: boolean // Default: false\nunavailableDates?: Date[] // Default: []\nminBookingDate?: Date\nmaxBookingDate?: Date\nnumberOfMonths?: number // Default: 2\nminBookingDays?: number // Default: 1\nexactMinBookingDays?: boolean // Default: false\nfirstDayOfWeek?: FirstDayOfWeek // Default: 0\ninitialVisibleMonth?: Date\nisDateBlocked?(date: Date): boolean\ndayLabelFormat?(date: Date): string\nweekdayLabelFormat?(date: Date): string\nmonthLabelFormat?(date: Date): string\nonDayRender?(date: Date): React.ReactNode\n```\n\n### DateSingleInput\n\nThe `DateSingleInput` is a fully controlled component that allows users to select a date. You can\ncontrol the selected date using the `date` and `onDateChange` props as shown below. Similarly, you\ncan control calendar visibility (the calendar is only visible if `showDatepicker` is `true`) with\nthe `showDatepicker` and `onFocusChange` props as shown below.\n\nHere is the minimum _REQUIRED_ setup you need to get the `DateSingleInput` working:\n\n**IE11 is not supported**\n\n```jsx\nimport React, {useReducer} from 'react'\nimport {DateSingleInput} from '@datepicker-react/styled'\n\nconst initialState = {\n  date: null,\n  showDatepicker: false,\n}\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'focusChange':\n      return {...state, showDatepicker: action.payload}\n    case 'dateChange':\n      return action.payload\n    default:\n      throw new Error()\n  }\n}\n\nfunction App() {\n  const [state, dispatch] = useReducer(reducer, initialState)\n\n  return (\n    \u003cDateSingleInput\n      onDateChange={data =\u003e dispatch({type: 'dateChange', payload: data})}\n      onFocusChange={focusedInput =\u003e dispatch({type: 'focusChange', payload: focusedInput})}\n      date={state.date} // Date or null\n      showDatepicker={state.showDatepicker} // Boolean\n    /\u003e\n  )\n}\n```\n\nThe following is a list of other _OPTIONAL_ props you may provide to the `DateSingleInput` to\ncustomize appearance and behavior to your heart's desire.\n\n```ts\nminBookingDate?: Date\nmaxBookingDate?: Date\nnumberOfMonths?: number\nfirstDayOfWeek?: FirstDayOfWeek\ndisplayFormat?: string | FormatFunction\nphrases?: DateSingleInputPhrases\nshowCalendarIcon?: boolean\nvertical?: boolean\nshowResetDate?: boolean\nshowClose?: boolean\nrtl?: boolean\nplacement?: 'top' | 'bottom'\ninitialVisibleMonth?: Date\nunavailableDates?: Date[] // Default: []\nisDateBlocked?(date: Date): boolean\nonClose?(): void\ndayLabelFormat?(date: Date): string\nweekdayLabelFormat?(date: Date): string\nmonthLabelFormat?(date: Date): string\nonDayRender?(date: Date): React.ReactNode\ninputId?: string\n```\n\n### Theming\n\n`@datepicker-react/styled` supports theming with Styled components `ThemeProvider` and\n`Styled System` theme-based style.\n\n```jsx\n\u003cThemeProvider\n  theme={{\n    breakpoints: ['32em', '48em', '64em'],\n    reactDatepicker: {\n      daySize: [36, 40],\n      fontFamily: 'system-ui, -apple-system',\n      colors: {\n        accessibility: '#D80249',\n        selectedDay: '#f7518b',\n        selectedDayHover: '#F75D95',\n        primaryColor: '#d8366f',\n      },\n    },\n  }}\n\u003e\n  ...\n\u003c/ThemeProvider\u003e\n```\n\n- [See all theme props](./docs/THEME_PROPS.md)\n- [CodeSandbox example](https://codesandbox.io/s/theming-datepicker-reactstyled-42pdb?fontsize=14)\n\n## Who's using\n\n[LifeOnScreen](https://lifeonscreen.com)\n\n## Articles\n\n- [Yet another datepicker in React](https://tresko.dev/yet-another-datepicker-in-react)\n- [Theming React datepicker](https://tresko.dev/theming-react-datepicker-datepicker-react-styled)\n- [Create a custom React date picker in 10 minutes](https://tresko.dev/create-a-custom-react-date-picker-in-10-minutes)\n\n## License\n\nLicensed under the MIT License, Copyright © 2019-present Miha Sedej.\n\nSee [LICENSE](https://github.com/tresko/react-datepicker/blob/master/LICENSE) for more information.\n\n\u003cbr/\u003e\n\n[![Buy me a coffee](https://camo.githubusercontent.com/031fc5a134cdca5ae3460822aba371e63f794233/68747470733a2f2f7777772e6275796d6561636f666665652e636f6d2f6173736574732f696d672f637573746f6d5f696d616765732f6f72616e67655f696d672e706e67)](https://www.buymeacoffee.com/T1Eu7XSoF)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft0gre%2Freact-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft0gre%2Freact-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft0gre%2Freact-datepicker/lists"}