{"id":13541693,"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker","last_synced_at":"2025-05-14T08:06:57.281Z","repository":{"id":147008127,"uuid":"617556643","full_name":"farhoudshapouran/react-native-ui-datepicker","owner":"farhoudshapouran","description":"Customizable React Native 📅 Date Picker component for Android, iOS, and Web. It includes single, range, and multiple modes, supports different locales, including the Jalali (Persian) calendar, handles different timezones, and is fully compatible with NativeWind.","archived":false,"fork":false,"pushed_at":"2025-04-02T15:51:50.000Z","size":19764,"stargazers_count":650,"open_issues_count":31,"forks_count":77,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-12T22:02:10.787Z","etag":null,"topics":["android","calendar","date-range-picker","datepicker","datetime-picker","datetimepicker","ios","jalali-calendar","jalali-date-picker","persian-calendar","persian-datepicker","picker","react-native","react-native-web","timepicker","timezone"],"latest_commit_sha":null,"homepage":"https://farhoudshapouran.github.io/react-native-ui-datepicker/","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/farhoudshapouran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["farhoudshapouran"],"buy_me_a_coffee":"farhoudshapouran"}},"created_at":"2023-03-22T16:24:04.000Z","updated_at":"2025-05-12T12:34:56.000Z","dependencies_parsed_at":"2023-07-25T21:00:32.295Z","dependency_job_id":"c65728ff-4504-418e-a8c3-7d6c09d01072","html_url":"https://github.com/farhoudshapouran/react-native-ui-datepicker","commit_stats":null,"previous_names":["farhoudshapouran/react-native-ui-datepicker","farhoodme/react-native-ui-datepicker"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-ui-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-ui-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-ui-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-ui-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farhoudshapouran","download_url":"https://codeload.github.com/farhoudshapouran/react-native-ui-datepicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101618,"owners_count":22014909,"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":["android","calendar","date-range-picker","datepicker","datetime-picker","datetimepicker","ios","jalali-calendar","jalali-date-picker","persian-calendar","persian-datepicker","picker","react-native","react-native-web","timepicker","timezone"],"created_at":"2024-08-01T10:00:54.531Z","updated_at":"2025-05-14T08:06:52.269Z","avatar_url":"https://github.com/farhoudshapouran.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farhoudshapouran","https://buymeacoffee.com/farhoudshapouran"],"categories":["TypeScript","Mobile","UI Components"],"sub_categories":["React Native \u0026 Expo","Calendars \u0026 Date/Time Pickers"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"/.github/images/rnui-datepicker.png\" alt=\"react-native-ui-datepicker\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n [![npm version](https://img.shields.io/npm/v/react-native-ui-datepicker)](https://www.npmjs.com/package/react-native-ui-datepicker)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-ui-datepicker.svg)](https://www.npmjs.com/package/react-native-ui-datepicker)\n[![Github](https://img.shields.io/github/license/farhoudshapouran/react-native-ui-datepicker)](https://github.com/farhoudshapouran/react-native-ui-datepicker)\n[![gzipped size](https://img.shields.io/bundlephobia/minzip/react-native-ui-datepicker)](https://www.npmjs.com/package/react-native-ui-datepicker)\n\n\u003c/div\u003e\n\nDateTimePicker component for React Native that allows you to create a customizable datetime picker. The component uses extensive set of props that allows you to customizing the calendar based on your own UI design. Please visit [demo](https://farhoudshapouran.github.io/react-native-ui-datepicker/).\n\n## Features\n\n- 📅 Supports different selection modes: single, range, and multiple days.\n- 🌿 Unstyled by default, every component is minimally styled and fully customizable.\n- 🛠️ Extensive set of props for fine-tuned calendar customization.\n- 🎨 Fully compatible with [NativeWind](https://www.nativewind.dev/).\n- 🌎 Easily localizable into any language.\n- 🕗 Handles different time zones seamlessly.\n- ⚙️ Customizable components allow extending rendered elements. \n- ⚡ Fast \u0026 lightweight, only re-renders the elements that actually change.\n\n## Installation\n\n```sh\nnpm install react-native-ui-datepicker\n```\n\nOr\n\n```sh\nyarn add react-native-ui-datepicker\n```\n\n## Basic Usage\n\n1. Import the component and default styles or classNames from  `react-native-ui-datepicker`.\n2. Choose a selection mode using the `mode` prop. The available modes are: `single`, `range`, and `multiple`.\n\n```jsx\nimport { useState } from  'react';\nimport DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';\n\nexport function Calendar() {\n  const defaultStyles = useDefaultStyles();\n  const [selected, setSelected] = useState\u003cDateType\u003e();\n\n  return (\n    \u003cDateTimePicker\n      mode=\"single\"\n      date={selected}\n      onChange={({ date }) =\u003e  setSelected(date)}\n      styles={defaultStyles}\n    /\u003e\n  );\n}\n```\n\n## Calendar Base Props\n\n| Name               | Type                              | Description                                        |\n| ------------------ | --------------------------------- | -------------------------------------------------- |\n| `mode`               | `\"single\"` \\| `\"range\"` \\| `\"multiple\"`   | Defines the DatePicker mode.                       |\n| `calendar`               | `\"gregory\"` \\| `\"jalali\"`  | Defines the calendar type of DatePicker.                      |\n| `minDate`            | `DateType`                        | Defines the minimum selectable date in the DatePicker.   |\n| `maxDate`            | `DateType`                        | Defines the maximum selectable date in the DatePicker.   |\n| `enabledDates`   | `DateType[]` \\| `(date: DateType) =\u003e boolean` | Defines an array of enabled dates or a function that returns `true` for enabled dates. It takes precedence over disabledDates. |\n| `disabledDates`      | `DateType[]` \\| `(date: DateType) =\u003e boolean` | Defines an array of disabled dates or a function that returns `true` for disabled dates.  |\n| `firstDayOfWeek`     | `number`                          | Defines the first day of the week: 0-6 (0 = Sunday, 6 = Saturday). |\n| `initialView`        | `\"day\"` \\| `\"month\"` \\| `\"year\"` \\| `\"time\"` | Defines the initial view of the DatePicker |\n| `month`              | `number`                              | Defines the currently selected month.     |\n| `year`              | `number`                              | Defines the currently selected year.      |\n| `onMonthChange`      | `(month: number) =\u003e void`             | Callback function triggered when the current month changes.   |\n| `onYearChange`       | `(year: number) =\u003e void`              | Callback function triggered when the current year changes.    |\n\n## Example\n\n```jsx\nexport function Calendar() {\n  let today = new Date();\n  const [selected, setSelected] = useState\u003cDateType\u003e();\n\n  return (\n    \u003cDateTimePicker\n      mode=\"single\"\n      date={selected}\n      onChange={({ date }) =\u003e  setSelected(date)}\n      minDate={today} // Set the minimum selectable date to today\n      enabledDates={(date) =\u003e dayjs(date).day() === 1} // Enable only Mondays (takes precedence over disabledDates)\n      disabledDates={(date) =\u003e [0, 6].includes(dayjs(date).day())} // Disable weekends\n    /\u003e\n  );\n}\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/.github/images/modes-screenshot.png\" /\u003e\n\u003c/p\u003e\n\n## Single Mode props\n\n| Name         | Type               | Description                                                   |\n| ------------ | ------------------ | ------------------------------------------------------------- |\n| `date`       | `DateType`         | Specifies the currently selected date.                        |\n| `onChange`   | `({date}) =\u003e void` | Callback function triggered when the date change.             |\n| `timePicker` | `boolean`          | Whether to enable the time picker.                            |\n| `use12Hours` | `boolean`          | Whether to use a 12-hour format (AM/PM) in the time picker.   |\n\n## Range Mode props\n\n| Name        | Type                             | Description                                                |\n| ----------- | -------------------------------- | -----------------------------------------------------------|\n| `startDate` | `DateType`                       | Defines the start date for a range selection.              |\n| `endDate`   | `DateType`                       | Defines the end date for a range selection.                |\n| `onChange`  | `({startDate, endDate}) =\u003e void` | Callback function triggered when the start and end change. |\n| `min`       | `number`                         | Defines the minimum allowed nights.                        |\n| `max`       | `number`                         | Defines the maximum allowed nights.                        |\n\n## Multiple Mode props\n\n| Name              | Type                | Description                                                 |\n| ----------------- | ------------------- | ----------------------------------------------------------- |\n| `dates`           | `DateType[]`        | Defines the selected dates for multiple date selection.     |\n| `onChange`        | `({dates}) =\u003e void` | Callback function triggered when the dates change.          |\n| `max`             | `number`            | Defines the maximum allowed days to select.                 |\n| `multiRangeMode`  | `boolean`           | Whether to display selecting multiple dates in a range row. |\n\n![react-native-ui-datepicker-styles](https://user-images.githubusercontent.com/7857656/227260476-30ee8c25-f809-4dcf-bccf-cd1ffab8795a.jpg)\n\n## Customization\n\n| Name                 | Type                                | Description                                               |\n| -------------------- | ----------------------------------- | --------------------------------------------------------- |\n| `showOutsideDays`    | `boolean`                           | Whether to show the days of the previous and next months. |\n| `navigationPosition` | `\"around\"` \\| `\"right\"` \\| `\"left\"` | Defines the position of the navigation.                   |\n| `containerHeight`    | `number`                            | Defines the height of the calendar days container.        |\n| `weekdaysHeight`     | `number`                            | Defines the height of the weekdays row.                   |\n| `weekdaysFormat`     | `\"short\"` \\| `\"full\"` \\| `\"min\"`    | Defines the format for displaying weekdays.               |\n| `monthsFormat`       | `\"short\"` \\| `\"full\"`               | Defines the format for displaying months.                 |\n| `monthCaptionFormat` | `\"short\"` \\| `\"full\"`               | Defines the format for displaying the month caption.      |\n| `hideHeader`         | `boolean`                           | Whether to hide the calendar header.                      |\n| `hideWeekdays`       | `boolean`                           | Whether to hide the weekdays row.                         |\n| `disableMonthPicker` | `boolean`                           | Whether to disable the month picker.                      |\n| `disableYearPicker`  | `boolean`                           | Whether to disable the year picker.                       |\n\n## Styling\n\nDateTimePicker comes with a minimal style, making it easy to extend and customize according to your needs.\n\n| Name              | Type            | Description                                                     |\n| ----------------- | --------------- | --------------------------------------------------------------- |\n| `style`           | `ViewStyle`     | style for the calendar container.                               |\n| `className`       | `string`        | className for the calendar container.                           |\n| `styles`          | `Styles`        | Custom styles for specific components inside the calendar.      |\n| `classNames`      | `ClassNames`    | Custom classNames for specific components inside the calendar.  |\n\n## Custom Styles\n\nUse the `styles` prop to apply custom styles instead of the default ones.\n\nThese styles are mapped to the values of the [UI Theme](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/src/ui.ts) enums.\n\n```jsx\nimport DateTimePicker, { useDefaultStyles } from 'react-native-ui-datepicker';\n\nexport function Calendar() {\n  const defaultStyles = useDefaultStyles();\n\n  return (\n    \u003cDateTimePicker\n      styles={{\n        ...defaultStyles,\n        today: { borderColor: 'blue', borderWidth: 1 }, // Add a border to today's date\n        selected: { backgroundColor: 'blue' }, // Highlight the selected day\n        selected_label: { color: 'white' }, // Highlight the selected day label\n      }}\n    /\u003e\n  );\n}\n```\n\n## NativeWind (Tailwind CSS)\n\nIf you're using [NativeWind](https://www.nativewind.dev/) in your project, apply Tailwind CSS class names to style the calendar.\nUse the `classNames` prop to apply custom class names instead of the default ones.\n\nThese class names are mapped to the values of the [UI Theme](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/src/ui.ts) enums.\n\n```jsx\nimport DateTimePicker, { useDefaultClassNames } from 'react-native-ui-datepicker';\n\nexport function Calendar() {\n  const defaultClassNames = useDefaultClassNames();\n\n  return (\n    \u003cDateTimePicker\n      classNames={{\n        ...defaultClassNames,\n        today: 'border-amber-500', // Add a border to today's date\n        selected: 'bg-amber-500 border-amber-500', // Highlight the selected day\n        selected_label: \"text-white\", // Highlight the selected day label\n        day: `${defaultClassNames.day} hover:bg-amber-100`, // Change background color on hover\n        disabled: 'opacity-50', // Make disabled dates appear more faded\n      }}\n    /\u003e\n  );\n}\n```\n\n## Time Zones\n\nUse the `timeZone` prop to set the time zone for the calendar.\n\n| Name           | Type               | Description                                |\n| -------------- | ------------------ | ------------------------------------------ |\n| `timeZone`     | `string`           | Defines the timezone for the DatePicker.   |\n\nThe time zone can be set using either an [IANA time zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) identifier or a UTC offset.\n\n```jsx\n\u003cDateTimePicker timeZone=\"UTC\" /\u003e // Use Coordinated Universal Time\n\u003cDateTimePicker timeZone=\"Asia/Tokyo\" /\u003e //  Use Japan Standard Time (JST)\n```\n\n## Localization\n\nDateTimePicker offers multiple options to customize the calendar for different languages.\n\n| Name         | Type                                 | Description                                                  |\n| ------------ | ------------------------------------ | ------------------------------------------------------------ |\n| `locale`     | `string`                             | Defines the locale of the DateTimePicker. Default is `en`    |\n| `numerals`   | [Numerals](#list-of-numeral-systems) | Specifies the numeral system to use (e.g., Arabic, Persian). |\n\n## Custom Components\n\nUse the `components` prop to replace the default rendered elements with your own custom components.\n\n| Name            | Type                      | Description                                              |\n| --------------- | ------------------------- | -------------------------------------------------------- |\n| `components`    | `CalendarComponents`      | Custom components to replace default calendar elements.  |\n\n\n## Implementing a Custom Component\n\nPass the custom components to the `components` prop. Refer to the list below for available [custom components](#list-of-custom-components).\n\n```jsx\nimport DateTimePicker, {\n  CalendarDay,\n  CalendarMonth,\n  CalendarComponents,\n} from 'react-native-ui-datepicker';\n\nconst components: CalendarComponents = {\n  Day: (day: CalendarDay) =\u003e \u003cYourCustomDay day={day} /\u003e,\n  Month: (month: CalendarMonth) =\u003e \u003cYourCustomMonth month={month} /\u003e\n  // etc\n};\n\nexport function Calendar() {\n  return (\n      \u003cDateTimePicker\n        components={components}\n      /\u003e\n  );\n}\n```\n\n## List of Custom Components\n\n| Name       | Type                                   | Description                                            |\n| ---------- | -------------------------------------- | ------------------------------------------------------ |\n| `Day`      | `(day: CalendarDay) =\u003e ReactNode`      | The component containing the day in the days grid.     |\n| `Month`    | `(month: CalendarMonth) =\u003e ReactNode`  | The component containing the month in the months grid. |\n| `Year`     | `(year: CalendarYear) =\u003e ReactNode`    | The component containing the year in the years grid.   |\n| `Weekday`  | `(weekday: CalendarWeek) =\u003e ReactNode` | The component containing the weekday in the header.    |\n| `IconPrev` | `ReactNode`                            | The previous month/year button icon in the header.     |\n| `IconNext` | `ReactNode`                            | The next month button/year icon in the header.         |\n\n## Type Definitions\n\n```typescript\ntype DateType = string | number | Dayjs | Date | null | undefined;\n\ntype CalendarMode = 'single' | 'range' | 'multiple';\n\ntype NavigationPosition = 'around' | 'right' | 'left';\n\ntype WeekdayFormat = 'min' | 'short' | 'full';\n\ntype MonthFormat = 'short' | 'full';\n\ntype CalendarDay = {\n  number: number;\n  text: string;\n  date: string;\n  isDisabled: boolean;\n  isCurrentMonth: boolean;\n  dayOfMonth?: number;\n  isToday: boolean;\n  isSelected: boolean;\n  inRange: boolean;\n  leftCrop: boolean;\n  rightCrop: boolean;\n  isStartOfWeek: boolean;\n  isEndOfWeek: boolean;\n  isCrop: boolean;\n  inMiddle: boolean;\n  rangeStart: boolean;\n  rangeEnd: boolean;\n};\n\ntype CalendarWeek = {\n  index: number;\n  name: {\n    full: string;\n    short: string;\n    min: string;\n  };\n};\n\ntype CalendarMonth = {\n  index: number;\n  name: {\n    full: string;\n    short: string;\n  };\n  isSelected: boolean;\n};\n\ntype CalendarYear = {\n  number: number;\n  text: string;\n  isSelected: boolean;\n  isActivated: boolean;\n};\n```\n\n## List of Numeral Systems\n\n| Name       | Description                                   |\n| ---------- | --------------------------------------------- |\n| `latn`     | Western Latin.                                |\n| `arab`     | Standard Arabic.                              |\n| `arabext`  | Eastern Arabic-Indic (Persian).               |\n| `deva`     | Devanagari, used in Indian languages.         |\n| `beng`     | Bengali, used in Bengali and Assamese.        |\n| `guru`     | Gurmukhi, used in Punjab, India.              |\n| `gujr`     | Gujarati, used in Gujarat, India.             |\n| `orya`     | Odia, used in Odisha, India.                  |\n| `tamldec`  | Tamil, used in Tamil-speaking regions.        |\n| `telu`     | Telugu, used in Andhra Pradesh and Telangana. |\n| `knda`     | Kannada, used in Karnataka, India.            |\n| `mlym`     | Malayalam, used in Kerala, India.             |\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/7857656/227187674-93012672-495d-4955-b4d3-46c3d016684e.jpg\" alt=\"react-native-ui-datepicker\" /\u003e\n\u003c/p\u003e\n\n## License\n\nMIT. See the [LICENSE](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/LICENSE) file for more details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a PR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarhoudshapouran%2Freact-native-ui-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarhoudshapouran%2Freact-native-ui-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarhoudshapouran%2Freact-native-ui-datepicker/lists"}