How to display date and time picker in ReactNative?

To display date and time picker in your React Native app, you need to install the community package as it's not included in React Native core.

Installation

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

Once installed, you can import and use the DateTimePicker component in your app.

Import Statement

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

Basic Syntax

<DateTimePicker 
    testID="dateTimePicker" 
    value={mydate} 
    mode={displaymode}
    is24Hour={true} 
    display="default" 
    onChange={onChangeFunc} 
/>

Key Properties

Example: Date Picker

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView, StyleSheet} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('date');
    const [isDisplayDate, setShow] = useState(false);

    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setShow(false);
        setDate(currentDate);
    };

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };

    const displayDatepicker = () => {
        showMode('date');
    };

    return (
        <SafeAreaView style={styles.container}>
            <View>
                <Button onPress={displayDatepicker} title="Show Date Picker!" />
            </View>
            {isDisplayDate && (
                <DateTimePicker
                    testID="dateTimePicker"
                    value={mydate}
                    mode={displaymode}
                    is24Hour={true}
                    display="default"
                    onChange={changeSelectedDate}
                />
            )}
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

Example: Time Picker

To display a time picker, simply change the mode to 'time':

import React, {useState} from 'react';
import {View, Button, Platform, SafeAreaView, StyleSheet} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
    const [mydate, setDate] = useState(new Date());
    const [displaymode, setMode] = useState('time');
    const [isDisplayDate, setShow] = useState(false);

    const changeSelectedDate = (event, selectedDate) => {
        const currentDate = selectedDate || mydate;
        setShow(false);
        setDate(currentDate);
    };

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };

    const displayTimepicker = () => {
        showMode('time');
    };

    return (
        <SafeAreaView style={styles.container}>
            <View>
                <Button onPress={displayTimepicker} title="Show Time Picker!" />
            </View>
            {isDisplayDate && (
                <DateTimePicker
                    value={mydate}
                    mode={displaymode}
                    is24Hour={true}
                    display="default"
                    onChange={changeSelectedDate}
                />
            )}
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

Key Points

• The picker visibility is controlled by state (isDisplayDate)
• Always hide the picker in the onChange callback
• Use different modes for date, time, or datetime selection
• The component handles platform-specific styling automatically

Conclusion

React Native DateTimePicker provides an easy way to implement native date and time selection. The component automatically adapts to platform conventions and offers flexible customization through props.