What is react-native-date-picker?
The react-native-date-picker package is a customizable date picker component for React Native applications. It allows users to select dates, times, or both, and provides various customization options to fit the design and functionality needs of the app.
What are react-native-date-picker's main functionalities?
Basic Date Picker
This code demonstrates a basic date picker where a button opens the date picker modal. The selected date is stored in the state.
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';
const App = () => {
const [date, setDate] = useState(new Date());
const [open, setOpen] = useState(false);
return (
<View>
<Button title="Open Date Picker" onPress={() => setOpen(true)} />
<DatePicker
modal
open={open}
date={date}
onConfirm={(date) => {
setOpen(false);
setDate(date);
}}
onCancel={() => {
setOpen(false);
}}
/>
</View>
);
};
export default App;
Time Picker
This code demonstrates a time picker where a button opens the time picker modal. The selected time is stored in the state.
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';
const App = () => {
const [time, setTime] = useState(new Date());
const [open, setOpen] = useState(false);
return (
<View>
<Button title="Open Time Picker" onPress={() => setOpen(true)} />
<DatePicker
modal
open={open}
date={time}
mode="time"
onConfirm={(time) => {
setOpen(false);
setTime(time);
}}
onCancel={() => {
setOpen(false);
}}
/>
</View>
);
};
export default App;
Date and Time Picker
This code demonstrates a date and time picker where a button opens the date and time picker modal. The selected date and time are stored in the state.
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';
const App = () => {
const [dateTime, setDateTime] = useState(new Date());
const [open, setOpen] = useState(false);
return (
<View>
<Button title="Open DateTime Picker" onPress={() => setOpen(true)} />
<DatePicker
modal
open={open}
date={dateTime}
mode="datetime"
onConfirm={(dateTime) => {
setOpen(false);
setDateTime(dateTime);
}}
onCancel={() => {
setOpen(false);
}}
/>
</View>
);
};
export default App;
Customizable Date Picker
This code demonstrates a customizable date picker where the text color and fade color are customized. The selected date is stored in the state.
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';
const App = () => {
const [date, setDate] = useState(new Date());
const [open, setOpen] = useState(false);
return (
<View>
<Button title="Open Custom Date Picker" onPress={() => setOpen(true)} />
<DatePicker
modal
open={open}
date={date}
onConfirm={(date) => {
setOpen(false);
setDate(date);
}}
onCancel={() => {
setOpen(false);
}}
textColor="blue"
fadeToColor="white"
mode="date"
/>
</View>
);
};
export default App;
Other packages similar to react-native-date-picker
react-native-modal-datetime-picker
react-native-modal-datetime-picker is a React Native module that allows you to use the native date and time pickers on iOS and Android in a modal. It provides a simple and customizable interface for selecting dates and times. Compared to react-native-date-picker, it offers a more native look and feel but may have fewer customization options.
react-native-datepicker
react-native-datepicker is another date picker component for React Native. It provides a simple and customizable date picker with various options for formatting and styling. Compared to react-native-date-picker, it is more lightweight but may lack some advanced features and customization options.
react-native-date-ranges
react-native-date-ranges is a date range picker component for React Native. It allows users to select a range of dates and provides various customization options. Compared to react-native-date-picker, it focuses on date range selection rather than individual date or time selection.
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
🌍 Multiple languages
🎨 Customizable
iOS |
|
Android Choose from 2 different variants |
|
|
androidVariant="iosClone" | androidVariant="nativeAndroid" |
Installation
npm install react-native-date-picker --save
react-native link react-native-date-picker
(Only needed for React Native <= 0.59)(cd ios && pod install)
(If you're using CocoaPods)
Xcode 11 is required to run the latest version of the date picker. Xcode 10 is supported up to version 2.7.2.
Minimal Example
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'
export default () => {
const [date, setDate] = useState(new Date())
return (
<DatePicker
date={date}
onDateChange={setDate}
/>
)
}
Properties
Prop | Description | Screenshots iOS | Screenshot Android |
---|
date | The currently selected date. | | |
onDateChange | Date change handler | | |
fadeToColor | Android picker is fading towards this background color. {color, 'none'} | | |
maximumDate | Maximum selectable date. | | |
minimumDate | Minimum selectable date | | |
androidVariant | Choose from 2 android style variants. {'iosClone', 'nativeAndroid'} (default: 'iosClone') | | |
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) | | |
About
📅 React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.
FAQ
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.
<item name="colorControlNormal">#ff0000</item>
Can I use expo?
Unfortunately, expo does not support this date picker at the moment. Upvote this feature request if you would like to have it included.
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 France 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 France preference. On Android the 12/24h format is determined by the device setting. When using 12h mode the AM/PM part of the picker will be displayed.
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 propery in android production/release mode. Add these lines to you proguard file (often called proguard-rules.pro
):
-keep public class net.time4j.android.ApplicationStarter
-keep public class net.time4j.PrettyTime
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 normaly 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:
<item name="colorControlNormal">#03b6fc</item>
|
androidVariant="nativeAndroid"
|
androidVariant="iosClone"
|
Three different modes
Here are some more info about the three different picker modes that are available.
Date time picker
Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this.
iOS | Android |
|
|
Add the optional datetime
mode property to use this mode. Since datetime is default this could also be exclude.
<DatePicker
...
mode="datetime"
/>
Datepicker
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:
<DatePicker
...
mode="date"
/>
Time picker
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:
<DatePicker
...
mode="time"
/>
Why another React Native datepicker?
One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seamlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both DatePickerIOS and DatePickerAndroid are present. The reason for this is that the default date picker is implemented in seperate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.
If you want to use these pickers you can combile the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particularly helpful to avoid 2 separate picker dialogs on android.