🚧 DatePickerAndroid
Deprecated. Use one of the community packages instead.
Opens the standard Android date picker dialog.
Example
Reference
Methods
Opens the standard Android date picker dialog.
The available keys for the options object are:
- date ( Date object or timestamp in milliseconds) — date to show by default
- minDate ( Date or timestamp in milliseconds) — minimum date that can be selected
- maxDate ( Date object or timestamp in milliseconds) — maximum date that can be selected
- mode ( enum(‘calendar’, ‘spinner’, ‘default’) ) — To set the date-picker mode to calendar/spinner/default
- ‘calendar’: Show a date picker in calendar mode.
- ‘spinner’: Show a date picker in spinner mode.
- ‘default’: Show a default native date picker(spinner/calendar) based on android versions.
Returns a Promise which will be invoked an object containing action , year , month (0-11), day if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being DatePickerAndroid.dismissedAction and all the other keys being undefined. Always check whether the action is equal to DatePickerAndroid.dateSetAction before reading the values.
Note the native date picker dialog has some UI glitches on Android 4 and lower when using the minDate and maxDate options.
Источник
Datepicker react native android
React Native Date Picker
This is a React Native Date Picker with following main features:
📱 Supporting iOS and Android
🕑 3 different modes: Time, Date, DateTime
🌍 Various languages
🎨 Customizable
🖼 Modal or Inlined
✅ No breaking changes
New feature: Modal mode
The first option is to use the built-in modal. See code.
iOS | Android |
The second option is to use the inlined picker. For instance in a view or a custom made modal. See code.
iOS | Android |
- Xcode >= 11.6
- React Native >= 0.57.
- If using React Native 0.64, 0.64.2 or later must be used.
- If using Expo, SDK 42 or later must be used.
If you’re using expo, follow these steps instead.
- Download package with npm or yarn
If you’re having troubles after following these steps, there might be a linking issue.
Expo is supported by creating a custom client.
- Create the custom client:
Or in the cloud
If you’re having troubles, read the pinned comment here.
Example 1: Modal
Example 2: Inlined
Prop | Description | Screenshots iOS | Screenshot Android |
---|---|---|---|
date | The currently selected date. | ||
onDateChange | Date change handler | ||
fadeToColor | Android picker is fading towards this background color. | ||
maximumDate | Maximum selectable date. Example: new Date(«2021-12-31») | ||
minimumDate | Minimum selectable date. Example: new Date(«2021-01-01») | ||
androidVariant | Choose from 2 android style variants. «iosClone» , «nativeAndroid» | ||
minuteInterval | The interval at which minutes can be selected. | ||
mode | The date picker mode. «datetime» , «date» , «time» | ||
locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. | ||
textColor | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the «Today» string with a date on iOS 13 or higher. | ||
timeZoneOffsetInMinutes | Timezone offset in minutes (default: device’s timezone) | ||
dividerHeight | Change the divider height (only supported for iosClone) | ||
is24hourSource | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. <'locale', 'device'>(android only, default: ‘device’) | ||
modal | Boolean indicating if modal should be used. Default: «false» . When enabled, the other modal props needs to be used. See example. | ||
open | Modal only: Boolean indicating if modal should be open. | ||
onConfirm | Modal only: Date callback when user presses confirm button | ||
onCancel | Modal only: Callback for when user presses cancel button or closing the modal by pressing outside it. | ||
title | Modal only: Title text. Can be set to null to remove text. | ||
confirmText | Modal only: Confirm button text. | ||
cancelText | Modal only: Cancel button text. |
This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as described above). Then rebuild the project by running react-native run-ios , react-native run-android or start the build from within Xcode/Android Studio. If you’re running a React Native version below 0.60 or your setup is having issues with automatic linking, you can run npx react-native link react-native-date-picker and rebuild. In some occations you’ll have to manually link the package. Instructions in this issue.
How do I change the divider color?
The color of the divider, separator (or whatever you choose to call it) can only be changed on android for the androidNative variant. To change it, add the following to your android AppTheme. The theme is often found in styles.xml.
How do i change the date order? (To YYYY-MM-DD etc)
The order is determined by the locale prop. Set for instance locale=’fr’ to get the french preference.
How do i change the 12/24h or AM/PM format?
On iOS the 12/24h preference is determined by the locale prop. Set for instance locale=’fr’ to get the french preference. On Android the 12/24h format is determined by the device setting by default. Add is24hourSource=»locale» to let the locale determine the device setting on android as well. When using 12h mode the AM/PM part of the picker will be displayed. It is NOT recommended to force any specific 12/24h format, but this can be achieved by, choosing a locale which has the desired 24h preference and add is24hourSource=»locale» .
Is it possible to show only month and year?
This is unfortunately not possible due to the limitation in DatePickerIOS. You should be able to create your own month-year picker with for instance https://github.com/TronNatthakorn/react-native-wheel-pick.
Why does the Android app crash in production?
If you have enabled Proguard for Android you might need to ignore some classes to get the the picker to work properly in android production/release mode. Add these lines to you proguard file (often called proguard-rules.pro ):
Two different Android variants
On Android there are two design variants to choose from:
iOS clone | Native Android | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The so called «iOS clone» looks and works similar to the ios version. It shows normally 5 lines of dates. It is enabled by default. | The «Android Native» version looks more like a standard native implementation on Android. The divider color can be changed by adding the following to you Android theme: #03b6fc | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
iOS | Android |
Add the optional datetime mode property to use this mode. Since datetime is default this could also be exclude.
The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:
iOS | Android |
Just add the value date to mode property:
The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the timeInterval to only display the time with for instance 15min intervals. The react native time picker look like this:
iOS | Android |
Set mode property to time to show the time picker:
React Native Date Picker is a cross platform component for iOS and Android. It uses native code from respective platform to get the genuine look and feel the users expect. A strong motivation for creating this picker was the datetime mode on Android. It’s quite unique for the platform and avoids two different picker popups, which normally is necessary. Instead, this datetime mode requires fewer user actions and enables a great user-experience.
Support this package!
If you like this package and want to support it, you can give it a review or a github star ⭐
Also, PR’s are welcome!
About
React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It’s written with native code to achieve the best possible look, feel and performance.
Источник
Datepicker react native android
A declarative cross-platform react-native date and time picker.
This 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.
Setup (for non-Expo projects)
If your project is not using Expo, install the library and the community date/time picker using npm or yarn:
Please notice that the @react-native-community/datetimepicker package is a native module so it might require manual linking.
Setup (for Expo projects)
If your project is using Expo, install the library and the community date/time picker using the Expo CLI:
To ensure the picker theme respects the device theme, you should also configure the appearance styles in your app.json this way:
Refer to the Appearance documentation on Expo for more info.
👉 Please notice that all the @react-native-community/react-native-datetimepicker props are supported as well!
Name | Type | Default | Description |
---|---|---|---|
backdropStyleIOS | style | The style of the picker backdrop view style (iOS) | |
cancelButtonTestID | string | Used to locate cancel button in end-to-end tests | |
cancelTextIOS | string | «Cancel» | The label of the cancel button (iOS) |
confirmButtonTestID | string | Used to locate confirm button in end-to-end tests | |
confirmTextIOS | string | «Confirm» | The label of the confirm button (iOS) |
customCancelButtonIOS | component | Overrides the default cancel button component (iOS) | |
customConfirmButtonIOS | component | Overrides the default confirm button component (iOS) | |
customHeaderIOS | component | Overrides the default header component (iOS) | |
customPickerIOS | component | Overrides the default native picker component (iOS) | |
date | obj | new Date() | Initial selected date/time |
isVisible | bool | false | Show the datetime picker? |
isDarkModeEnabled | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
modalPropsIOS | object | <> | Additional modal props for iOS |
modalStyleIOS | style | Style of the modal content (iOS) | |
mode | string | «date» | Choose between «date», «time», and «datetime» |
onCancel | func | REQUIRED | Function called on dismiss |
onChange | func | () => null | Function called when the date changes (with the new date as parameter). |
onConfirm | func | REQUIRED | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
onHide | func | () => null | Called after the hide animation |
pickerContainerStyleIOS | style | The style of the picker container (iOS) | |
pickerStyleIOS | style | The style of the picker component wrapper (iOS) |
Frequently Asked Questions
The component is not working as expected
Under the hood react-native-modal-datetime-picker uses @react-native-community/datetimepicker . Before reporting a bug, try swapping react-native-datetime-picker with @react-native-community/datetimepicker and, if the issue persists, check if it has already been reported as a an issue there.
How can I show the timepicker instead of the datepicker?
Set the mode prop to time . You can also display both the datepicker and the timepicker in one step by setting the mode prop to datetime .
I can’t set the initial date on the picker
Please make sure you’re using the date props (and not the value one).
Can I use the new iOS 14 style for the date/time picker?
Yes!
You can set the display prop (that we’ll pass down to react-native-datetimepicker ) to inline to use the new iOS 14 picker.
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.
The picker shows up twice on Android
This seems to be a known issue of the @react-native-community/datetimepicker . Please see this thread for a couple of workarounds. The solution, as described in this reply is hiding the modal, before doing anything else.
Example of solution using Input + DatePicker
The most common approach for solving this issue when using an Input is:
- Wrap your Input with a » Pressable «/ Button ( TouchableWithoutFeedback / TouchableOpacity + activeOpacity= <1>for example)
- Prevent Input from being focused. You could set editable=
too for preventing Keyboard opening - Triggering your hideModal() callback as a first thing inside onConfirm / onCancel callback props
How can I set a minimum and/or maximum date?
How do I change the color of the Android date and time pickers?
This is more a React-Native specific question than a react-native-modal-datetime-picker one.
See issue #29 and #106 for some solutions.
How to set 24 hours in iOS ?
The 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 :
How can I change the picker language/locale?
Under the hood this library is using @react-native-community/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.
How can I set an automatic locale in iOS
On iOS, you can set an automatic detection of the locale ( fr_FR , en_GB , . ) depending on the user’s device locale. To do so, edit your AppDelegate.m file and add the following to didFinishLaunchingWithOptions .
The picker is not showing the right layout on iOS >= 14
I can’t show an alert after the picker has been hidden (on iOS)
Unfortunately 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 😔 :
See issue #512 for more info.
Why does the date of onConfirm not match the picked date (on iOS)
On 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.
See this GitHub gist 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.
Related issue in the React-Native repo here.
How do I make it work with snapshot testing?
See issue #216 for a possible workaround.
The library is released under the MIT license. For more details see LICENSE .
About
A React-Native datetime-picker for Android and iOS
Источник