Implementing a Date Time picker in React Native (2021)

Date pickers are a common and essential component for many apps across platforms, especially those that facilitate event booking—like a hotel booking app—to aid seamless date selection. 

Date pickers improve app usability by reducing the complexities of date validation issues by ensuring that invalid dates cannot be entered, restricting date ranges, and eliminating date format confusion (for example, is ‘7/9/10’ July 9, 2010 or September 7, 2010).

The React Native framework used to provide React-Native date picker APIs for Android and iOS [DatePickerAndriod and DatePickerIOS]are now deprecated.

Our choices now are to either build a date picker from scratch or use another date picker library.

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!

Step 1: The Solution

We are going to use this nice component react-native-datetimepicker/datetimepicker which is a neat and elegant approach to implement a Date and Time picker for both iOS and Android.

Step 2 : The Installation 👏

npm i @react-native-community/datetimepicker

If you are using yarn

yarn add @react-native-community/datetimepicker

I : By default, the picker height is fixed to 216px. The picker’s text color is controlled by the application theme (light / dark mode). In dark mode, the text is white, and in light mode, the text is black.

Step 3: Adding the picker component

Let's import the picker component first and then we can add it to the screen or App.js

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

To add the picker component by adding the <DateTimePicker/>

<DateTimePicker
          value={date}
          mode={'date'}
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          is24Hour={true}
          onChange={onChange}
          style={styles.datePicker}
        />

Let's build a simple UI to test the DateTime picker. 

In this example, we are going to add a button and a text view which is going to display the selected value from DateTime picker.

 <View style={styles.container}>
      {/* Display the selected date */}
      <View style={styles.pickedDateContainer}>
        <Text style={styles.pickedDate}>{date.toUTCString()}</Text>
      </View>

      {/* The button that used to trigger the date picker */}
      {!isPickerShow && (
        <View style={styles.btnContainer}>
          <Button title="Show Picker" color="#9AD54B" onPress={showPicker} />
        </View>
      )}

Step 4: Add some Styling !

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: 50,
  },
  pickedDateContainer: {
    padding: 20,
    backgroundColor: '#E0F01F',
    borderRadius: 10,
  },
  pickedDate: {
    fontSize: 18,
    color: '#1F0FE0',
  },
  btnContainer: {
    padding: 30,
  },
  // This only works on iOS
  datePicker: {
    width: 320,
    height: 260,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});

Step 5: The Complete Code

// App.js
import React, {useState} from 'react';
import {StyleSheet, View, Text, Button, Platform} from 'react-native';

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

const App = () => {
  const [isPickerShow, setIsPickerShow] = useState(false);
  const [date, setDate] = useState(new Date(Date.now()));

  const showPicker = () => {
    setIsPickerShow(true);
  };

  const onChange = (event, value) => {
    setDate(value);
    if (Platform.OS === 'android') {
      setIsPickerShow(false);
    }
  };

  return (
    <View style={styles.container}>
      {/* Display the selected date */}
      <View style={styles.pickedDateContainer}>
        <Text style={styles.pickedDate}>{date.toUTCString()}</Text>
      </View>

      {/* The button that used to trigger the date picker */}
      {!isPickerShow && (
        <View style={styles.btnContainer}>
          <Button title="Show Picker" color="#9AD54B" onPress={showPicker} />
        </View>
      )}

      {/* The date picker */}
      {isPickerShow && (
        <DateTimePicker
          value={date}
          mode={'date'}
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          is24Hour={true}
          onChange={onChange}
          style={styles.datePicker}
        />
      )}
    </View>
  );
};

// just add some styles to make our app look more beautiful
// This is not the focus of this article
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: 50,
  },
  pickedDateContainer: {
    padding: 20,
    backgroundColor: '#E0F01F',
    borderRadius: 10,
  },
  pickedDate: {
    fontSize: 18,
    color: '#1F0FE0',
  },
  btnContainer: {
    padding: 30,
  },
  // This only works on iOS
  datePicker: {
    width: 320,
    height: 260,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});

export default App;

Step 6: Conclusion

In this article, we went over how to create a Date and Time Picker in React Native by using the react-native-datetimepicker / datetimepicker module. If you’d like to learn more about React Native, check out our React Native topic page for more tutorials and examples.