Hello friends, We all know that selecting time and date is sometimes so much useful in mobile applications regarding to Alarm or Event apps. But we cannot find so precise app for react native which gives us both Time Picker and Date Picker together and we don’t have to install multiple libraries. So here is the solution for us friends, In today’s tutorial we would learn about React Native Community DateTimePicker NPM YARN package. Using this package we can easily make Time Picker and Date Picker in our react native android iOS application. User can select time and date both as per their requirement and use them. You can learn more about this package Here on their official page.
Contents in this project Example of React Native Community DateTimePicker :-
1. First of all we have to install React Native DateTimePicker package in our react native app. So open your project’s main Root directory in CMD or Terminal and execute below command.
1 |
npm install @react-native-community/datetimepicker --save |
OR
1 |
yarn add @react-native-community/datetimepicker |
Screenshots :-

1 |
cd ios && pod install && cd .. |
3. Now we’re ready to go. It’s time to start coding for the app. So open your project’s main App.js file and import useState, Button, SafeAreaView, StyleSheet, Text and View component.
1 2 3 |
import React, { useState } from "react"; import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native'; |
4. Importing DateTimePicker from ‘@react-native-community/datetimepicker’ .
1 |
import DateTimePicker from '@react-native-community/datetimepicker'; |
5. Creating our main App component.
1 2 3 4 5 6 |
export default function App() { } |
6. Creating 2 States named as datePicker with setDatePicker State update method to show and hide the Date Picker Dialog and date with setDate method to Hold the selected Date.
1 2 3 |
const [datePicker, setDatePicker] = useState(false); const [date, setDate] = useState(new Date()); |
7. Creating 2 State named as timePicker with setTimePicker state update method to show and hide the Time Picker dialog and time with setTime method to hold the selected time.
1 2 3 |
const [timePicker, setTimePicker] = useState(false); const [time, setTime] = useState(new Date(Date.now())); |
8. Creating 2 functions to show the Date Picker and Time Picker.
1 2 3 4 5 6 7 |
function showDatePicker() { setDatePicker(true); }; function showTimePicker() { setTimePicker(true); }; |
9. Creating 2 more functions to set Selected Date and Time into State.
1 2 3 4 5 6 7 8 9 |
function onDateSelected(event, value) { setDate(value); setDatePicker(false); }; function onTimeSelected(event, value) { setTime(value); setTimePicker(false); }; |
10. Creating return() block, Here we would make our Both DateTimePicker with mode time and date .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}>Date = {date.toDateString()}</Text> <Text style={styleSheet.text}>Time = {time.toLocaleTimeString('en-US')}</Text> {datePicker && ( <DateTimePicker value={date} mode={'date'} display={Platform.OS === 'ios' ? 'spinner' : 'default'} is24Hour={true} onChange={onDateSelected} style={styleSheet.datePicker} /> )} {timePicker && ( <DateTimePicker value={time} mode={'time'} display={Platform.OS === 'ios' ? 'spinner' : 'default'} is24Hour={false} onChange={onTimeSelected} style={styleSheet.datePicker} /> )} {!datePicker && ( <View style={{ margin: 10 }}> <Button title="Show Date Picker" color="green" onPress={showDatePicker} /> </View> )} {!timePicker && ( <View style={{ margin: 10 }}> <Button title="Show Time Picker" color="green" onPress={showTimePicker} /> </View> )} </View> </SafeAreaView> ); |
11. Creating Style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 6, alignItems: 'center', backgroundColor: 'white' }, text: { fontSize: 25, color: 'red', padding: 3, marginBottom: 10, textAlign: 'center' }, // Style for iOS ONLY... datePicker: { justifyContent: 'center', alignItems: 'flex-start', width: 320, height: 260, display: 'flex', }, }); |
12. Complete Source Code for App.js file :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
import React, { useState } from "react"; import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; export default function App() { const [datePicker, setDatePicker] = useState(false); const [date, setDate] = useState(new Date()); const [timePicker, setTimePicker] = useState(false); const [time, setTime] = useState(new Date(Date.now())); function showDatePicker() { setDatePicker(true); }; function showTimePicker() { setTimePicker(true); }; function onDateSelected(event, value) { setDate(value); setDatePicker(false); }; function onTimeSelected(event, value) { setTime(value); setTimePicker(false); }; return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}>Date = {date.toDateString()}</Text> <Text style={styleSheet.text}>Time = {time.toLocaleTimeString('en-US')}</Text> {datePicker && ( <DateTimePicker value={date} mode={'date'} display={Platform.OS === 'ios' ? 'spinner' : 'default'} is24Hour={true} onChange={onDateSelected} style={styleSheet.datePicker} /> )} {timePicker && ( <DateTimePicker value={time} mode={'time'} display={Platform.OS === 'ios' ? 'spinner' : 'default'} is24Hour={false} onChange={onTimeSelected} style={styleSheet.datePicker} /> )} {!datePicker && ( <View style={{ margin: 10 }}> <Button title="Show Date Picker" color="green" onPress={showDatePicker} /> </View> )} {!timePicker && ( <View style={{ margin: 10 }}> <Button title="Show Time Picker" color="green" onPress={showTimePicker} /> </View> )} </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 6, alignItems: 'center', backgroundColor: 'white' }, text: { fontSize: 25, color: 'red', padding: 3, marginBottom: 10, textAlign: 'center' }, // Style for iOS ONLY... datePicker: { justifyContent: 'center', alignItems: 'flex-start', width: 320, height: 260, display: 'flex', }, }); |
Screenshots :-