Example of React Native Community DateTimePicker

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.

npm install @react-native-community/datetimepicker --save

1	npm install @react-native-community/datetimepicker --save

yarn add @react-native-community/datetimepicker

1	yarn add @react-native-community/datetimepicker

Screenshots :-

2. This step is for iOS users only. In iOS after installing the package we have to install PODS to link the package. So for iOS users you have to execute below command.

cd ios && pod install && cd ..

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.

import React, { useState } from "react";

import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import React, { useState } from "react";

import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';

4. Importing DateTimePicker from ‘@react-native-community/datetimepicker’ .

import DateTimePicker from '@react-native-community/datetimepicker';

1	import DateTimePicker from '@react-native-community/datetimepicker';

5. Creating our main App component.

export default function App() {




}

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.

  const [datePicker, setDatePicker] = useState(false);

  const [date, setDate] = useState(new Date());

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.

  const [timePicker, setTimePicker] = useState(false);

  const [time, setTime] = useState(new Date(Date.now()));

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.

 function showDatePicker() {
    setDatePicker(true);
  };

  function showTimePicker() {
    setTimePicker(true);
  };

function showDatePicker() {

setDatePicker(true);

};

function showTimePicker() {

setTimePicker(true);

};

9. Creating 2 more functions to set Selected Date and Time into State.

  function onDateSelected(event, value) {
    setDate(value);
    setDatePicker(false);
  };

  function onTimeSelected(event, value) {
    setTime(value);
    setTimePicker(false);
  };

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 .

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>
  );

return (

<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>

)}

{!timePicker && (

</View>

)}

</View>

</SafeAreaView>

);

11. Creating Style.

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',
  },

});

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 :-

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',
  },

});

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 (

<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>

)}

{!timePicker && (

</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 :-

Example of React Native Community DateTimePicker

Contents in this project Example of React Native Community DateTimePicker :-

Also Read :

Leave a Reply Cancel reply

Search Here