{"id":13403724,"url":"https://github.com/mmazzarolo/react-native-modal-datetime-picker","last_synced_at":"2025-05-14T18:03:54.493Z","repository":{"id":37669097,"uuid":"68200339","full_name":"mmazzarolo/react-native-modal-datetime-picker","owner":"mmazzarolo","description":"A React-Native datetime-picker for Android and iOS","archived":false,"fork":false,"pushed_at":"2024-08-22T15:03:43.000Z","size":5415,"stargazers_count":3023,"open_issues_count":49,"forks_count":395,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-09T19:12:04.840Z","etag":null,"topics":["android","date","ios","modal","picker","react","react-native","time"],"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/mmazzarolo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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":"2016-09-14T11:27:18.000Z","updated_at":"2025-05-08T06:15:07.000Z","dependencies_parsed_at":"2024-11-19T11:05:54.163Z","dependency_job_id":"332226f5-a092-4530-8185-62ecc7465399","html_url":"https://github.com/mmazzarolo/react-native-modal-datetime-picker","commit_stats":{"total_commits":405,"total_committers":98,"mean_commits":4.13265306122449,"dds":0.5185185185185186,"last_synced_commit":"56cc719a5e20cbe6aab7606a50b5e84765e1c391"},"previous_names":[],"tags_count":86,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-modal-datetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-modal-datetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-modal-datetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-modal-datetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmazzarolo","download_url":"https://codeload.github.com/mmazzarolo/react-native-modal-datetime-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253309343,"owners_count":21887973,"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","date","ios","modal","picker","react","react-native","time"],"created_at":"2024-07-30T19:01:33.759Z","updated_at":"2025-05-14T18:03:49.485Z","avatar_url":"https://github.com/mmazzarolo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","Please find below the links to awesome cheat-sheet and resources:"],"sub_categories":["Releases","React/React-Native:"],"readme":"# react-native-modal-datetime-picker\n\n[![npm version](https://badge.fury.io/js/react-native-modal-datetime-picker.svg)](https://badge.fury.io/js/react-native-modal-datetime-picker)\n![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg)\n\nA declarative cross-platform react-native date and time picker.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./.github/images/datetimepicker-android.gif\" height=\"400\" /\u003e\n\u003cimg src=\"./.github/images/datetimepicker-ios.gif\" height=\"400\" /\u003e\n\u003c/p\u003e\n\nThis library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal, providing a unified user and developer experience.\n\nUnder the hood, this library is using [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker).\n\n## Setup (for non-Expo projects)\n\nIf your project is not using [Expo](https://expo.io/), install the library and the community date/time picker using npm or yarn:\n\n```bash\n# using npm\n$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker\n\n# using yarn\n$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker\n```\n\nPlease notice that the `@react-native-community/datetimepicker` package is a native module so [**it might require manual linking**](https://github.com/react-native-community/react-native-datetimepicker#getting-started).\n\n## Setup (for Expo projects)\n\nIf your project is using [Expo](https://expo.io/), install the library and the community date/time picker using the [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/):\n\n```bash\nnpx expo install react-native-modal-datetime-picker @react-native-community/datetimepicker\n```\n\nTo ensure the picker theme respects the device theme, you should also configure the appearance styles in your `app.json` this way:\n\n```json\n{\n \"expo\": {\n \"userInterfaceStyle\": \"automatic\"\n }\n}\n```\n\nRefer to the [Appearance](https://docs.expo.io/versions/latest/sdk/appearance/) documentation on [Expo](https://expo.io/) for more info.\n\n## Usage\n\n```javascript\nimport React, { useState } from \"react\";\nimport { Button, View } from \"react-native\";\nimport DateTimePickerModal from \"react-native-modal-datetime-picker\";\n\nconst Example = () =\u003e {\n const [isDatePickerVisible, setDatePickerVisibility] = useState(false);\n\n const showDatePicker = () =\u003e {\n setDatePickerVisibility(true);\n };\n\n const hideDatePicker = () =\u003e {\n setDatePickerVisibility(false);\n };\n\n const handleConfirm = (date) =\u003e {\n console.warn(\"A date has been picked: \", date);\n hideDatePicker();\n };\n\n return (\n \u003cView\u003e\n \u003cButton title=\"Show Date Picker\" onPress={showDatePicker} /\u003e\n \u003cDateTimePickerModal\n isVisible={isDatePickerVisible}\n mode=\"date\"\n onConfirm={handleConfirm}\n onCancel={hideDatePicker}\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Example;\n```\n\n## Available props\n\nšŸ‘‰ Please notice that **all the [`@react-native-community/react-native-datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) props are supported** as well!\n\n| Name | Type | Default | Description |\n| ------------------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) |\n| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |\n| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |\n| `cancelTextIOS` | string | \"Cancel\" | The label of the cancel button (iOS) |\n| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |\n| `confirmTextIOS` | string | \"Confirm\" | The label of the confirm button (iOS) |\n| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |\n| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |\n| `customHeaderIOS` | component | | Overrides the default header component (iOS) |\n| `customPickerIOS` | component | | Overrides the default native picker component (iOS) |\n| `date` | obj | new Date() | Initial selected date/time |\n| `isVisible` | bool | false | Show the datetime picker? |\n| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |\n| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |\n| `modalStyleIOS` | style | | Style of the modal content (iOS) |\n| `mode` | string | \"date\" | Choose between \"date\", \"time\", and \"datetime\" |\n| `onCancel` | func | **REQUIRED** | Function called on dismiss |\n| `onChange` | func | () =\u003e null | Function called when the date changes (with the new date as parameter). |\n| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |\n| `onHide` | func | () =\u003e null | Called after the hide animation |\n| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |\n| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |\n| `pickerComponentStyleIOS` | style | | The style applied to the actual picker component - this can be either a native iOS picker or a custom one if `customPickerIOS` was provided |\n\n## Frequently Asked Questions\n\nThis repo is only maintained by me, and unfortunately I don't have enough time for dedicated support \u0026 question.\nIf you're experiencing issues, please check the FAQs below. \nFor questions and support, please start [try starting a discussion](https://github.com/mmazzarolo/react-native-modal-datetime-picker/discussions) or try asking it on [StackOverflow](stackoverflow). \nāš ļø **Please use [the GitHub issues](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues) only for well-described and reproducible bugs. Question/support issues will be closed.**\n\n### The component is not working as expected, what should I do?\n\nUnder the hood `react-native-modal-datetime-picker` uses [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker).\nIf you're experiencing issues, try swapping `react-native-datetime-picker` with [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker). If the issue persists, check if it has already been reported as a an issue or check the other FAQs.\n\n### How can I show the timepicker instead of the datepicker?\n\nSet the `mode` prop to `time`.\nYou can also display both the datepicker and the timepicker in one step by setting the `mode` prop to `datetime`.\n\n### Why is the initial date not working?\n\nPlease make sure you're using the `date` props (and not the `value` one).\n\n### Can I use the new iOS 14 style for the date/time picker?\n\nYes! \nYou can set the `display` prop (that we'll pass down to [`react-native-datetimepicker`](https://github.com/react-native-datetimepicker/datetimepicker)) to `inline` to use the new iOS 14 picker.\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"./.github/images/datetimepicker-ios-inline.png\" height=\"400\" /\u003e\n\u003c/p\u003e\n\n\u003e Please notice that you should probably avoid using this new style with a time-only picker (so with `mode` set to `time`) because it doesn't suit well this use case.\n\n### Why does the picker show up twice on Android?\n\nThis seems to be a known issue of the [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker/issues/54). Please see [this thread](https://github.com/react-native-community/datetimepicker/issues/54) for a couple of workarounds. The solution, as described in [this reply](https://github.com/react-native-datetimepicker/datetimepicker/issues/54#issuecomment-618776550) is hiding the modal, **before doing anything else**.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eExample of solution using Input + DatePicker\u003c/strong\u003e\u003c/summary\u003e\n\u003cp\u003e\nThe most common approach for solving this issue when using an \u003ccode\u003eInput\u003c/code\u003e is:\n\u003cul\u003e\n \u003cli\u003eWrap your \u003ccode\u003eInput\u003c/code\u003e with a \"\u003ccode\u003ePressable\u003c/code\u003e\"/\u003ccode\u003eButton\u003c/code\u003e (\u003ccode\u003eTouchableWithoutFeedback\u003c/code\u003e/\u003ccode\u003eTouchableOpacity\u003c/code\u003e + \u003ccode\u003eactiveOpacity={1}\u003c/code\u003e for example)\u003c/li\u003e\n \u003cli\u003ePrevent \u003ccode\u003eInput\u003c/code\u003e from being focused. You could set \u003ccode\u003eeditable={false}\u003c/code\u003e too for preventing Keyboard opening\u003c/li\u003e\n \u003cli\u003eTriggering your \u003ccode\u003ehideModal()\u003c/code\u003e callback as a first thing inside \u003ccode\u003eonConfirm\u003c/code\u003e/\u003ccode\u003eonCancel\u003c/code\u003e callback props\u003c/li\u003e\n\u003c/ul\u003e\n\n```jsx\nconst [isVisible, setVisible] = useState(false);\nconst [date, setDate] = useState('');\n\n\u003cTouchableOpacity\n activeOpacity={1}\n onPress={() =\u003e setVisible(true)}\u003e\n \u003cInput\n value={value}\n editable={false} // optional\n /\u003e\n\u003c/TouchableOpacity\u003e\n\u003cDatePicker\n isVisible={isVisible}\n onConfirm={(date) =\u003e {\n setVisible(false); // \u003c- first thing\n setValue(parseDate(date));\n }}\n onCancel={() =\u003e setVisible(false)}\n/\u003e\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n### How can I allow picking only specific dates?\n\nYou can't ā€” [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) doesn't allow you to do so. That said, you can allow only \"range\" of dates by setting a minimum and maximum date. See below for more info.\n\n### How can I set a minimum and/or maximum date?\n\nYou can use the [`minimumDate`](https://github.com/react-native-datetimepicker/datetimepicker#minimumdate-optional) and [`maximumDate`](https://github.com/react-native-datetimepicker/datetimepicker#maximumdate-optional) props from [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker).\n\n### How do I change the color of the Android date and time pickers?\n\nThis is more a React-Native specific question than a react-native-modal-datetime-picker one. \nSee issue [#29](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/29) and [#106](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/106) for some solutions.\n\n### How to set a 24-hours format in iOS?\n\nThe `is24Hour` prop is only available on Android but you can use a small hack for enabling it on iOS by setting the picker timezone to `en_GB`:\n\n```js\n\u003cDatePicker\n mode=\"time\"\n locale=\"en_GB\" // Use \"en_GB\" here\n date={new Date()}\n/\u003e\n```\n\n### How can I change the picker language/locale?\n\nUnder the hood this library is using [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker). You can't change the language/locale from `react-native-modal-datetime-picker`. Locale/language is set at the native level, on the device itself.\n\n### How can I set an automatic locale in iOS?\n\nOn iOS, you can set an automatic detection of the locale (`fr_FR`, `en_GB`, ...) depending on the user's device locale.\nTo do so, edit your `AppDelegate.m` file and add the following to `didFinishLaunchingWithOptions`.\n\n```objc\n// Force DatePicker locale to current language (for: 24h or 12h format, full day names etc...)\nNSString *currentLanguage = [[NSLocale preferredLanguages] firstObject];\n[[UIDatePicker appearance] setLocale:[[NSLocale alloc]initWithLocaleIdentifier:currentLanguage]];\n```\n\n### Why is the picker is not showing the right layout on iOS \u003e= 14?\n\nPlease make sure you're on the latest version of `react-native-modal-datetime-picker` and of the [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker).\n[We already closed several iOS 14 issues that were all caused by outdated/cached versions of the community datetimepicker](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues?q=%22ios+14%22).\n\n### Why is the picker not visible/transparent on iOS?\n\nPlease make sure you're on the latest version of `react-native-modal-datetime-picker` and of [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker).\nAlso, double-check that the picker light/dark theme is aligned with the OS one (e.g., don't \"force\" a theme using `isDarkModeEnabled`).\n\n### Why can't I show an alert after the picker has been hidden (on iOS)?\n\nUnfortunately this is a know issue with React-Native on iOS. Even by using the `onHide` callback exposed by `react-native-modal-datetime-picker` you might not be able to show the (native) alert successfully. The only workaround that seems to work consistently for now is to wrap showing the alter in a setTimeout šŸ˜”:\n\n```js\nconst handleHide = () =\u003e {\n setTimeout(() =\u003e Alert.alert(\"Hello\"), 0);\n};\n```\n\nSee issue [#512](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/512) for more info.\n\n### Why does the date of `onConfirm` not match the picked date (on iOS)?\n\nOn iOS, clicking the \"Confirm\" button while the spinner is still in motion ā€” even just _slightly_ in motion ā€” will cause the `onConfirm` callback to return the initial date instead of the picked one. This is is a long standing iOS issue (that can happen even on native app like the iOS calendar) and there's no failproof way to fix it on the JavaScript side. \nSee [this GitHub gist](https://gist.github.com/SudoPlz/6959001879fbfcc7e2aa42a428a5265c) for an example of how it might be solved at the native level ā€” but keep in mind it won't work on this component until it has been merged into the official React-Native repo.\n\nRelated issue in the React-Native repo [here](https://github.com/facebook/react-native/issues/8169).\n\n### How do I make it work with snapshot testing?\n\nSee issue [#216](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/216) for a possible workaround.\n\n## Contributing\n\nPlease see the [contributing guide](./.github/CONTRIBUTING.md).\n\n## License\n\nThe library is released under the MIT license. For more details see [`LICENSE`](/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-modal-datetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmazzarolo%2Freact-native-modal-datetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-modal-datetime-picker/lists"}