{"id":15032452,"url":"https://github.com/react-native-datetimepicker/datetimepicker","last_synced_at":"2025-05-13T23:07:27.080Z","repository":{"id":38130745,"uuid":"187225547","full_name":"react-native-datetimepicker/datetimepicker","owner":"react-native-datetimepicker","description":"React Native date \u0026 time picker component for iOS, Android and Windows","archived":false,"fork":false,"pushed_at":"2025-02-04T09:00:03.000Z","size":6782,"stargazers_count":2652,"open_issues_count":79,"forks_count":425,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-12T19:25:43.907Z","etag":null,"topics":["datetimepicker","hacktoberfest","react-native"],"latest_commit_sha":null,"homepage":"","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/react-native-datetimepicker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["react-native-datetimepicker"],"open_collective":"react-native-datetimepicker"}},"created_at":"2019-05-17T13:56:57.000Z","updated_at":"2025-05-12T15:54:02.000Z","dependencies_parsed_at":"2024-02-15T17:31:49.473Z","dependency_job_id":"38d64c2c-ccfa-4c09-8c63-d8f34fb94af5","html_url":"https://github.com/react-native-datetimepicker/datetimepicker","commit_stats":{"total_commits":505,"total_committers":88,"mean_commits":5.738636363636363,"dds":0.7584158415841584,"last_synced_commit":"80446e4d75ea95d0864e224d53c9845a3e368047"},"previous_names":["react-native-community/datetimepicker"],"tags_count":105,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-datetimepicker%2Fdatetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-datetimepicker%2Fdatetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-datetimepicker%2Fdatetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-datetimepicker%2Fdatetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-datetimepicker","download_url":"https://codeload.github.com/react-native-datetimepicker/datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254041261,"owners_count":22004692,"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":["datetimepicker","hacktoberfest","react-native"],"created_at":"2024-09-24T20:18:27.209Z","updated_at":"2025-05-13T23:07:27.026Z","avatar_url":"https://github.com/react-native-datetimepicker.png","language":"JavaScript","funding_links":["https://github.com/sponsors/react-native-datetimepicker","https://opencollective.com/react-native-datetimepicker"],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🚧🚧 Looking for collaborators and financial backers 🚧🚧\n\nPlease support maintenance of the module with a monthly donation or help us with issues and pull requests.\n\n[Become a backer on OpenCollective](https://opencollective.com/react-native-datetimepicker) or [sponsor us on GitHub Sponsors](https://github.com/sponsors/react-native-datetimepicker).\n\nSee this [issue](https://github.com/react-native-datetimepicker/datetimepicker/issues/313) for context. Thank you!\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n---\n\n## React Native DateTimePicker\n\nThis repository was moved out of the react native community GH organization, in accordance to [this proposal](https://github.com/react-native-community/discussions-and-proposals/issues/176).\nThe module is still published on `npm` under the old namespace (as documented) but will be published under a new namespace at some point, with a major version bump.\n\n![CircleCI Status][circle-ci-status]\n![Supports Android and iOS][support-badge]\n![MIT License][license-badge]\n[![Lean Core Badge][lean-core-badge]][lean-core-issue]\n\nReact Native date \u0026 time picker component for iOS, Android and Windows (please note Windows is not actively maintained).\n\n## Screenshots\n\n\u003cdetails\u003e\n  \u003csummary\u003eExpand for screenshots\u003c/summary\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\u003ctd colspan=2\u003e\u003cstrong\u003eiOS\u003c/strong\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/ios_date_new.png\" height=\"420\"/\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/ios_time.png\" width=\"260\" height=\"420\"/\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd colspan=2\u003e\u003cstrong\u003eAndroid\u003c/strong\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/android_date.png\" width=\"200\" height=\"400\"/\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/android_time.png\" width=\"200\" height=\"400\"/\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/android_material_date.jpg\" width=\"200\" height=\"400\"/\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/android_material_time.jpg\" width=\"200\" height=\"400\"/\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd colspan=1\u003e\u003cstrong\u003eWindows\u003c/strong\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/windows_date.png\" width=\"380\" height=\"430\"/\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/windows_time_2.png\" width=\"380\" height=\"430\"/\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/images/windows_time_1.png\" width=\"310\" height=\"40\"/\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c/details\u003e\n\n## Table of contents\n\n- [React Native DateTimePicker](#react-native-datetimepicker)\n  - [Table of contents](#table-of-contents)\n  - [Expo users notice](#expo-users-notice)\n  - [Getting started](#getting-started)\n  - [Usage](#usage)\n  - [React Native Support](#react-native-support)\n  - [Localization note](#localization-note)\n  - [Android imperative API](#android-imperative-api)\n  - [Android styling](#android-styling)\n  - [Props / params](#component-props--params-of-the-android-imperative-api)\n    - [`mode` (`optional`)](#mode-optional)\n    - [`display` (`optional`)](#display-optional)\n    - [`design` (`optional`, `Android only`)](#design-optional)\n    - [`initialInputMode` (`optional`, `Android only`)](#initialinputmode-optional-android-only)\n    - [`title` (`optional`, `Android only`)](#title-optional-android-only)\n    - [`fullscreen` (`optional`, `Android only`)](#fullscreen-optional-android-only)\n    - [`onChange` (`optional`)](#onchange-optional)\n    - [`value` (`required`)](#value-required)\n    - [`maximumDate` (`optional`)](#maximumdate-optional)\n    - [`minimumDate` (`optional`)](#minimumdate-optional)\n    - [`timeZoneName` (`optional`, `iOS or Android only`)](#timeZoneName-optional-ios-and-android-only)\n    - [`timeZoneOffsetInMinutes` (`optional`, `iOS or Android only`)](#timezoneoffsetinminutes-optional-ios-and-android-only)\n    - [`timeZoneOffsetInSeconds` (`optional`, `Windows only`)](#timezoneoffsetinsecond-optional-windows-only)\n    - [`dayOfWeekFormat` (`optional`, `Windows only`)](#dayOfWeekFormat-optional-windows-only)\n    - [`dateFormat` (`optional`, `Windows only`)](#dateFormat-optional-windows-only)\n    - [`firstDayOfWeek` (`optional`, `Windows only`)](#firstDayOfWeek-optional-windows-only)\n    - [`textColor` (`optional`, `iOS only`)](#textColor-optional-ios-only)\n    - [`accentColor` (`optional`, `iOS only`)](#accentColor-optional-ios-only)\n    - [`themeVariant` (`optional`, `iOS only`)](#themevariant-optional-ios-only)\n    - [`locale` (`optional`, `iOS only`)](#locale-optional-ios-only)\n    - [`is24Hour` (`optional`, `Windows and Android only`)](#is24hour-optional-windows-and-android-only)\n    - [`positiveButton` (`optional`, `Android only`)](#positiveButton-optional-android-only)\n    - [`negativeButton` (`optional`, `Android only`)](#negativeButton-optional-android-only)\n    - [`neutralButton` (`optional`, `Android only`)](#neutralButton-optional-android-only)\n    - [`minuteInterval` (`optional`)](#minuteinterval-optional)\n    - [`style` (`optional`, `iOS only`)](#style-optional-ios-only)\n    - [`disabled` (`optional`, `iOS only`)](#disabled-optional-ios-only)\n    - [`view props` (`optional`, `iOS only`)](#view-props-optional-ios-only)\n    - [`onError` (`optional`, `Android only`)](#onError-optional-android-only)\n  - [Testing with Jest](#testing-with-jest)\n  - [Migration from the older components](#migration-from-the-older-components)\n  - [Contributing to the component](#contributing-to-the-component)\n  - [Manual installation](#manual-installation)\n  - [Running the example app](#running-the-example-app)\n\n## Requirements\n\n- Only Android API level \u003e=21 (Android 5), iOS \u003e= 11 are supported.\n- Tested with Xcode 14.0 and RN 0.72.7. Other configurations are very likely to work as well but have not been tested.\n\nThe module supports the [new React Native architecture](https://reactnative.dev/docs/next/the-new-architecture/why) (Fabric rendering of iOS components, and turbomodules on Android). If you are using the new architecture, you will need to use React Native 0.71.4 or higher.\n\n## Expo users notice\n\nThis module is part of Expo Managed Workflow - [see docs](https://docs.expo.io/versions/latest/sdk/date-time-picker/). However, Expo SDK in the Managed Workflow may not contain the latest version of the module and therefore, the newest features and bugfixes may not be available in Expo Managed Workflow.\nIf you use the Managed Workflow, use the command `expo install @react-native-community/datetimepicker` (not `yarn` or `npm`) to install this module - Expo will automatically install the latest version compatible with your Expo SDK (which may _not_ be the latest version of the module available).\n\nIf you're using a [Dev Client](https://docs.expo.dev/development/create-development-builds/), rebuild the Dev Client after installing the dependencies.\n\nIf you're using the [`expo prebuild`](https://docs.expo.dev/workflow/prebuild/) command and building your native app projects (e.g. with EAS Build or locally), you can use the latest version of the module.\n\n## Getting started\n\n```bash\nnpm install @react-native-community/datetimepicker --save\n```\n\nor\n\n```bash\nyarn add @react-native-community/datetimepicker\n```\n\nAutolinking is not yet implemented on Windows, so [manual installation ](/docs/manual-installation.md) is needed.\n\n#### RN \u003e= 0.60\n\nIf you are using RN \u003e= 0.60, only run `npx pod-install`. Then rebuild your project.\n\n## React Native Support\n\nCheck the `react-native` version support table below to find the corresponding `datetimepicker` version to meet support requirements. Maintenance is only provided for last 3 stable react-native versions.\n\n| react-native version | version |\n| -------------------- | ------- |\n| 0.73.0+              | 7.6.3+  |\n| \u003c=0.72.0             | \u003c=7.6.2 |\n| 0.70.0+              | 7.0.1+  |\n| \u003c0.70.0              | \u003c=7.0.0 |\n\n## Usage\n\n```js\nimport DateTimePicker from '@react-native-community/datetimepicker';\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eExpand for examples\u003c/summary\u003e\n\nWe give two equivalent examples on how to use the package on all supported platforms.\n\n### Recommended imperative api usage on Android\n\nWhile the component-approach as given in the second paragraph works on Android, the recommended approach is to use the imperative api given in the first paragraph.\n\nRead more about the motivation in [Android imperative API](#android-imperative-api).\n\n```js\nexport const App = () =\u003e {\n  const [date, setDate] = useState(new Date(1598051730000));\n\n  const onChange = (event, selectedDate) =\u003e {\n    const currentDate = selectedDate;\n    setDate(currentDate);\n  };\n\n  const showMode = (currentMode) =\u003e {\n    DateTimePickerAndroid.open({\n      value: date,\n      onChange,\n      mode: currentMode,\n      is24Hour: true,\n    });\n  };\n\n  const showDatepicker = () =\u003e {\n    showMode('date');\n  };\n\n  const showTimepicker = () =\u003e {\n    showMode('time');\n  };\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cButton onPress={showDatepicker} title=\"Show date picker!\" /\u003e\n      \u003cButton onPress={showTimepicker} title=\"Show time picker!\" /\u003e\n      \u003cText\u003eselected: {date.toLocaleString()}\u003c/Text\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n```\n\n### Component usage on iOS / Android / Windows\n\n```js\nexport const App = () =\u003e {\n  const [date, setDate] = useState(new Date(1598051730000));\n  const [mode, setMode] = useState('date');\n  const [show, setShow] = useState(false);\n\n  const onChange = (event, selectedDate) =\u003e {\n    const currentDate = selectedDate;\n    setShow(false);\n    setDate(currentDate);\n  };\n\n  const showMode = (currentMode) =\u003e {\n    setShow(true);\n    setMode(currentMode);\n  };\n\n  const showDatepicker = () =\u003e {\n    showMode('date');\n  };\n\n  const showTimepicker = () =\u003e {\n    showMode('time');\n  };\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cButton onPress={showDatepicker} title=\"Show date picker!\" /\u003e\n      \u003cButton onPress={showTimepicker} title=\"Show time picker!\" /\u003e\n      \u003cText\u003eselected: {date.toLocaleString()}\u003c/Text\u003e\n      {show \u0026\u0026 (\n        \u003cDateTimePicker\n          testID=\"dateTimePicker\"\n          value={date}\n          mode={mode}\n          is24Hour={true}\n          onChange={onChange}\n        /\u003e\n      )}\n    \u003c/SafeAreaView\u003e\n  );\n};\n```\n\n\u003c/details\u003e\n\n## Localization note\n\nBy localization, we refer to the language (names of months and days), as well as order in which date can be presented in a picker (month/day vs. day/month) and 12 / 24 hour-format.\n\nOn Android, the picker will be controlled by the system locale. If you wish to change it, [see instructions here](https://developer.android.com/guide/topics/resources/app-languages).\n\nOn iOS, use XCode, as [documented here](https://developer.apple.com/documentation/xcode/adding-support-for-languages-and-regions) to inform the OS about the locales your application supports. iOS will automatically display the correctly localized DateTimePicker as long as the target language is contained in `project.pbxproj`.\n\n\u003e If you use a library like [i18next](https://github.com/i18next/react-i18next) or [react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux) to manage your translations, it is sufficient to add your target languages as described in the Apple Documentation - but you are not required to add any localization keys (like, for example, the days of the week). iOS will automatically display the correct localized strings as long as the target language is contained in `project.pbxproj`.\n\nFor testing your localization setup, refer [here](https://developer.apple.com/documentation/xcode/testing-localizations-when-running-your-app).\n\nThere is also the iOS-only locale prop that can be used to force locale in some cases but its usage is discouraged due to [not working robustly in all picker modes](./docs/images/ios_date_new.png) (note the mixed month and day names). To the best of our knowledge, it works reliably in the `spinner` mode.\n\nFor Expo, follow the [localization docs](https://docs.expo.dev/distribution/app-stores/#localizing-your-ios-app).\n\n### Android imperative api\n\nOn Android, you have a choice between using the component API (regular React component) or an imperative api (think of something like `ReactNative.alert()`).\n\nWhile the component API has the benefit of writing the same code on all platforms, for start we recommend using the imperative API on Android.\n\nThe `params` is an object with the same properties as the component props documented in the next paragraph. (This is also because the component api internally uses the imperative one.)\n\n```ts\nimport { DateTimePickerAndroid } from '@react-native-community/datetimepicker';\n\nDateTimePickerAndroid.open(params: AndroidNativeProps)\nDateTimePickerAndroid.dismiss(mode: AndroidNativeProps['mode'])\n```\n\nThe reason we recommend the imperative API is: on Android, the date/time picker opens in a dialog, similar to `ReactNative.alert()` from core react native. The imperative api models this behavior better than the declarative component api. While the component approach is perfectly functional, based on the issue tracker history, it appears to be more prone to introducing bugs.\n\n### Android styling\n\nIf you'd like to use the Material pickers, your app theme will need to inherit from `Theme.Material3.DayNight.NoActionBar` in `styles.xml`.\n\nStyling of the dialogs on Android can be easily customized by using the provided config plugin, provided that you use a [Expo development build](https://docs.expo.dev/develop/development-builds/introduction/). The plugin allows you to configure color properties that cannot be set at runtime and requires building a new app binary to take effect.\n\nRefer to this documentation for more information: [android-styling.md](/docs/android-styling.md).\n\n## Component props / params of the Android imperative api\n\n\u003e Please note that this library currently exposes functionality from [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker?language=objc) on iOS and [DatePickerDialog](https://developer.android.com/reference/android/app/DatePickerDialog) + [TimePickerDialog](https://developer.android.com/reference/android/app/TimePickerDialog) on Android, and [`CalendarDatePicker`](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/calendar-date-picker) + [TimePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.timepicker?view=winrt-19041) on Windows.\n\u003e\n\u003e These native classes offer only limited configuration, while there are dozens of possible options you as a developer may need. It follows that if your requirement is not supported by the backing native views, this library will _not_ be able to implement your requirement. When you open an issue with a feature request, please document if (or how) the feature can be implemented using the aforementioned native views. If the native views do not support what you need, such feature requests will be closed as not actionable.\n\n#### `mode` (`optional`)\n\nDefines the type of the picker.\n\nList of possible values:\n\n- `\"date\"` (default for `iOS` and `Android` and `Windows`)\n- `\"time\"`\n- `\"datetime\"` (`iOS` only)\n- `\"countdown\"` (`iOS` only)\n\n```js\n\u003cRNDateTimePicker mode=\"time\" /\u003e\n```\n\n#### `display` (`optional`)\n\nDefines the visual display of the picker. The default value is `\"default\"`.\n\nList of possible values for Android\n\n- `\"default\"` - Recommended. Show a default date picker (spinner/calendar/clock) based on `mode`.\n- `\"spinner\"`\n- `\"calendar\"` (only for `date` mode)\n- `\"clock\"` (only for `time` mode)\n\nList of possible values for iOS (maps to [preferredDatePickerStyle](https://developer.apple.com/documentation/uikit/uidatepicker/3526124-preferreddatepickerstyle?changes=latest_minor\u0026language=objc))\n\n- `\"default\"` - Automatically pick the best style available for the current platform \u0026 mode.\n- `\"spinner\"` - the usual pre-iOS 14 appearance with a wheel from which you choose values\n- `\"compact\"` - Affects only iOS 14 and later. Will fall back to \"spinner\" if not supported.\n- `\"inline\"` - Affects only iOS 14 and later. Will fall back to \"spinner\" if not supported.\n\n```js\n\u003cRNDateTimePicker display=\"spinner\" /\u003e\n```\n\n#### `design` (`optional`, `Android only`)\n\nDefines if the picker should use Material 3 components or the default picker. The default value is `\"default\"`.\n\nList of possible values\n\n- `\"default\"`\n- `\"material\"`\n\n```js\n\u003cRNDateTimePicker design=\"material\" /\u003e\n```\n\n#### `onChange` (`optional`)\n\nDate change handler.\n\nThis is called when the user changes the date or time in the UI. It receives the event and the date as parameters.\nIt is also called when user dismisses the picker, which you can detect by checking the `event.type` property.\nThe values can be: `'set' | 'dismissed' | 'neutralButtonPressed'`. (`neutralButtonPressed` is only available on Android).\n\nThe `utcOffset` field is only available on Android and iOS. It is the offset in minutes between the selected date and UTC time.\n\n```js\nconst setDate = (event: DateTimePickerEvent, date: Date) =\u003e {\n  const {\n    type,\n    nativeEvent: {timestamp, utcOffset},\n  } = event;\n};\n\n\u003cRNDateTimePicker onChange={this.setDate} /\u003e;\n```\n\n#### `value` (`required`)\n\nDefines the date or time value used in the component.\n\n```js\n\u003cRNDateTimePicker value={new Date()} /\u003e\n```\n\n#### `maximumDate` (`optional`)\n\nDefines the maximum date that can be selected. Note that on Android, this only works for `date` mode because [TimePicker](https://developer.android.com/reference/android/widget/TimePicker) does not support this.\n\n```js\n\u003cRNDateTimePicker maximumDate={new Date(2030, 10, 20)} /\u003e\n```\n\n#### `minimumDate` (`optional`)\n\nDefines the minimum date that can be selected. Note that on Android, this only works for `date` mode because [TimePicker](https://developer.android.com/reference/android/widget/TimePicker) does not support this.\n\n```js\n\u003cRNDateTimePicker minimumDate={new Date(1950, 0, 1)} /\u003e\n```\n\n#### `timeZoneName` (`optional`, `iOS and Android only`)\n\nAllows changing of the time zone of the date picker. By default, it uses the device's time zone.\nUse the time zone name from the IANA (TZDB) database name in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones.\n\n```js\n\u003cRNDateTimePicker timeZoneName={'Europe/Prague'} /\u003e\n```\n\n#### `timeZoneOffsetInMinutes` (`optional`, `iOS and Android only`)\n\nAllows changing of the time zone of the date picker. By default, it uses the device's time zone.\nWe **strongly** recommend using `timeZoneName` prop instead; this prop has known issues in the android implementation (eg. [#528](https://github.com/react-native-datetimepicker/datetimepicker/issues/528)).\n\nThis prop will be removed in a future release.\n\n```js\n// GMT+1\n\u003cRNDateTimePicker timeZoneOffsetInMinutes={60} /\u003e\n```\n\n#### `timeZoneOffsetInSeconds` (`optional`, `Windows only`)\n\nAllows changing of the time zone of the date picker. By default, it uses the device's time zone.\n\n```js\n// UTC+1\n\u003cRNDateTimePicker timeZoneOffsetInSeconds={3600} /\u003e\n```\n\n#### `dayOfWeekFormat` (`optional`, `Windows only`)\n\nSets the display format for the day of the week headers.\nReference: https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendarview.dayofweekformat?view=winrt-18362#remarks\n\n```js\n\u003cRNDateTimePicker dayOfWeekFormat={'{dayofweek.abbreviated(2)}'} /\u003e\n```\n\n#### `dateFormat` (`optional`, `Windows only`)\n\nSets the display format for the date value in the picker's text box.\nReference: https://docs.microsoft.com/en-us/uwp/api/windows.globalization.datetimeformatting.datetimeformatter?view=winrt-18362#examples\n\n```js\n\u003cRNDateTimePicker dateFormat=\"dayofweek day month\" /\u003e\n```\n\n#### `firstDayOfWeek` (`optional`, `Android and Windows only`)\n\nIndicates which day is shown as the first day of the week.\n\n```js\n\u003cRNDateTimePicker firstDayOfWeek={DAY_OF_WEEK.Wednesday} /\u003e\n// The native parameter type is an enum defined in defined https://docs.microsoft.com/en-us/uwp/api/windows.globalization.dayofweek?view=winrt-18362 - meaning an integer needs to passed here (DAY_OF_WEEK).\n```\n\n#### `textColor` (`optional`, `iOS only`)\n\nAllows changing of the textColor of the date picker. Has effect only when `display` is `\"spinner\"`.\n\n```js\n\u003cRNDateTimePicker textColor=\"red\" /\u003e\n```\n\n#### `accentColor` (`optional`, `iOS only`)\n\nAllows changing the accentColor (tintColor) of the date picker.\nHas no effect when `display` is `\"spinner\"`.\n\n#### `themeVariant` (`optional`, `iOS only`)\n\nAllows overriding system theme variant (dark or light mode) used by the date picker.\nHowever, we recommend that you instead control the theme of the whole application using [react-native-theme-control](https://github.com/vonovak/react-native-theme-control).\n\n:warning: Has effect only on iOS 14 and later. On iOS 13 \u0026 less, use `textColor` to make the picker dark-theme compatible\n\nList of possible values:\n\n- `\"light\"`\n- `\"dark\"`\n\n```js\n\u003cRNDateTimePicker themeVariant=\"light\" /\u003e\n```\n\n#### `locale` (`optional`, `iOS only`)\n\nAllows changing the locale of the component. This affects the displayed text and the date / time formatting. By default, the device's locale is used. Please note using this prop is discouraged due to not working reliably in all picker modes.\nPrefer localization as documented in [Localization note](#localization-note).\n\n```js\n\u003cRNDateTimePicker locale=\"es-ES\" /\u003e\n```\n\n#### `is24Hour` (`optional`, `Windows and Android only`)\n\nAllows changing of the time picker to a 24-hour format. By default, this value is decided automatically based on the locale and other preferences.\n\n```js\n\u003cRNDateTimePicker is24Hour={true} /\u003e\n```\n\n#### `initialInputMode` (`optional`, `Android only`)\n\n:warning: Has effect only when `design` is \"material\". Allows setting the initial input mode of the picker.\n\nList of possible values:\n\n- `\"default\"` - Recommended. Date pickers will show the calendar view by default, and time pickers will show the clock view by default.\n- `\"keyboard\"` - Both pickers will show an input where the user can type the date or time.\n\n```js\n\u003cRNDateTimePicker initialInputMode=\"default\" /\u003e\n```\n\n#### `title` (`optional`, `Android only`)\n\n:warning: Has effect only when `design` is \"material\". Allows setting the title of the dialog for the pickers.\n\n```js\n\u003cRNDateTimePicker title=\"Choose anniversary\" /\u003e\n```\n\n#### `fullscreen` (`optional`, `Android only`)\n\n:warning: Has effect only when `design` is \"material\". Allows setting the date picker dialog to be fullscreen.\n\n```js\n\u003cRNDateTimePicker fullscreen={true} /\u003e\n```\n\n#### `positiveButton` (`optional`, `Android only`)\n\nSet the positive button label and text color.\n\n```js\n\u003cRNDateTimePicker positiveButton={{label: 'OK', textColor: 'green'}} /\u003e\n```\n\n#### `neutralButton` (`optional`, `Android only`)\n\nAllows displaying neutral button on picker dialog.\nPressing button can be observed in onChange handler as `event.type === 'neutralButtonPressed'`\n\n```js\n\u003cRNDateTimePicker neutralButton={{label: 'Clear', textColor: 'grey'}} /\u003e\n```\n\n#### `negativeButton` (`optional`, `Android only`)\n\nSet the negative button label and text color.\n\n```js\n\u003cRNDateTimePicker negativeButton={{label: 'Cancel', textColor: 'red'}} /\u003e\n```\n\n#### `positiveButtonLabel` (`optional`, `Android only`, deprecated)\n\nChanges the label of the positive button.\n\n```js\n\u003cRNDateTimePicker positiveButtonLabel=\"OK!\" /\u003e\n```\n\n#### `negativeButtonLabel` (`optional`, `Android only`, deprecated)\n\nChanges the label of the negative button.\n\n```js\n\u003cRNDateTimePicker negativeButtonLabel=\"Negative\" /\u003e\n```\n\n#### `neutralButtonLabel` (`optional`, `Android only`, deprecated)\n\nAllows displaying neutral button on picker dialog.\nPressing button can be observed in onChange handler as `event.type === 'neutralButtonPressed'`\n\n```js\n\u003cRNDateTimePicker neutralButtonLabel=\"clear\" /\u003e\n```\n\n#### `minuteInterval` (`optional`)\n\nThe interval at which minutes can be selected.\nPossible values are: `1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30`\n\nOn Windows, this can be any number between 0-59.\n\non iOS, this in only supported when `display=\"spinner\"`\n\n```js\n\u003cRNDateTimePicker minuteInterval={10} /\u003e\n```\n\n#### `style` (`optional`, `iOS only`)\n\nSets style directly on picker component. By default, the picker dimensions are determined based on the props.\n\nPlease note that by default, picker's text color is controlled by the application theme (light / dark mode). In dark mode, text is white and in light mode, text is black.\nIf you want to control the application theme, we recommend using [react-native-theme-control](https://github.com/vonovak/react-native-theme-control).\n\nThis means that e.g. if the device has dark mode turned on, and your screen background color is white, you will not see the picker. Please use the `Appearance` api to adjust the picker's background color so that it is visible, as we do in the [example App](/example/App.js).\nAlternatively, use the `themeVariant` prop.\n\n```js\n\u003cRNDateTimePicker style={{flex: 1}} /\u003e\n```\n\n#### `disabled` (`optional`, `iOS only`)\n\nIf true, the user won't be able to interact with the view.\n\n#### `testID` (`optional`)\n\nUsually used by app automation frameworks.\nFully supported on iOS. On Android, only supported for `mode=\"date\"`.\n\n```js\n\u003cRNDateTimePicker testID=\"datePicker\" /\u003e\n```\n\n#### `View Props` (`optional`, `iOS only`)\n\nOn iOS, you can pass any [View props](https://reactnative.dev/docs/view#props) to the component. Given that the underlying component is a native view, not all of them are guaranteed to be supported, but `testID` and `onLayout` are known to work.\n\n#### `onError` (`optional`, `Android only`)\n\nCallback that is called when an error occurs inside the date picker native code (such as null activity).\n\n## Testing with Jest\n\nFor examples of how you can write your tests, look [here](/test/userlandTestExamples.test.js).\n\n## Migration from the older components\n\nPlease see [migration.md](/docs/migration.md)\n\n## Contributing to the component\n\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Manual installation\n\nPlease see [manual-installation.md](/docs/manual-installation.md)\n\n## Running the example app\n\n1. Run `yarn` in repo root\n2. Run `cd example`\n3. Install required pods by running `npx pod-install`\n4. Run `yarn start` to start Metro Bundler\n5. Run `yarn run start:ios` or `yarn run start:android` or `yarn run start:windows`\n6. To do any development on the library, open the example project (in the `example` folder) in xCode or Android Studio. The example project depends on the library code, which you can edit and observe any changes in the example project.\n\nThis project is tested with BrowserStack.\n\n[circle-ci-badge]: https://img.shields.io/circleci/project/github/react-native-community/datetimepicker/master.svg?style=flat-square\n[circle-ci-status]: https://circleci.com/gh/react-native-datetimepicker/datetimepicker.svg?style=svg\n[support-badge]: https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20windows-lightgrey.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/@react-native-community/slider.svg?style=flat-square\n[lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square\n[lean-core-issue]: https://github.com/facebook/react-native/issues/23313\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-datetimepicker%2Fdatetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-datetimepicker%2Fdatetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-datetimepicker%2Fdatetimepicker/lists"}