How to Add Date and Time Pickers in your React Native Apps

In mobile app development, handling dates and times is a common requirement. Whether it’s scheduling appointments, setting reminders, or displaying time-sensitive information, having a reliable Date and Time Picker component is essential. In React Native, the DateTimePicker component simplifies the process of selecting dates and times. In this blog, we’ll delve into when we might use the Date and Time Picker and how to implement a DateTimePicker component in your react native apps.

1. Event Scheduling: Allow users to pick dates and times when they want to schedule an event, such as meetings, appointments, or reminders.
2. Birthdays and Anniversaries: Collect users’ birthdates or important anniversaries to provide personalized experiences or send timely notifications.
3. Booking Services: When users are booking services, like flights, hotels, or restaurants, they need to specify check-in and check-out dates and times.
4. Countdowns: Develop countdown apps for upcoming events, product launches, or deadlines.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, View, Text } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState(new Date());

  const onChange = (e, selectedDate) => {
    setDate(selectedDate);
  };

  return (
    <View style={styles.container}>
      <DateTimePicker
        value={date}
        mode={"date"}
        is24Hour={true}
        onChange={onChange}
      />
      <DateTimePicker
        value={date}
        mode={"time"}
        is24Hour={true}
        onChange={onChange}
      />
      <Text>{date.toLocaleString()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

1. Imports:
   • StatusBar: This component controls the appearance of the status bar at the top of the screen.
   • StyleSheet: A utility for creating styles.
   • View and Text: Basic components for structuring and displaying UI elements.
   • DateTimePicker: The core component for picking dates and times.
   • useState: A React Hook for managing component state.
2. useState: The useState Hook is used to create a piece of state called date. It’s initialized with the current date and time. If we call the setDate functions it updates the value of date, and triggers a re-render of components so the change in date is reflected on screen.
3. onChange: The onChange function is defined to update the date state whenever the user selects a date or time in the DateTimePicker.
4. Rendering:
   • Two DateTimePicker components are rendered, one for picking the date and another for picking the time. Both components are associated with the date state and share the same onChange function. In iOS you can specify datetime type and have only one picker, but this is not available in Android. For simplicity of code, I have chosen to display 2 DateTimePicker components.
   • A Text component displays the selected date and time using the toLocaleString method, which converts the Date object to a human-readable string.

The selected date and time are displayed below the DateTimePicker components using the toLocaleString method. This string provides a user-friendly representation of the chosen date and time.