React Native Date Picker

Components of React Native

React Native offers a wide range of built-in components developers can utilize to build user interfaces for mobile applications. Some of the critical components provided by React Native are:

1. View: The View component is like a container used to group and style other components. It is similar to a `<div>` element in web development.
2. Text: The Text component displays text content in the app. It supports styling, such as font size, color, and alignment.
3.  Image: The Image component displays images in the app. It supports loading images from local resources or remote URLs.
4. TextInput: The TextInput component provides a text input field where users can enter text. It supports features like placeholder text, password input, and keyboard types.
5. ScrollView: The ScrollView component provides a scrollable container for displaying a large amount of content. It enables users to scroll vertically or horizontally to view the content.
6. FlatList: The FlatList component renders a scrolling list of items. It is optimized for performance and memory efficiency, making it suitable for rendering long data lists.
7. TouchableOpacity: The TouchableOpacity component is a button-like component that responds to touch events. It provides visual feedback to the user when pressed.
8. StatusBar: The StatusBar component allows developers to control the status bar appearance on the device. It can set the status bar color, style, and visibility.
9. Picker: The Picker component provides a dropdown menu for selecting an item from a list of options. It is commonly used to select a date, time, or category.
10. WebView: The WebView component allows developers to embed web content within the app. It provides a way to display web pages or load web-based functionality.

Also see,  React Native Reanimated

What is Date Picker React Native?

Date Picker is a Picker component provided by React Native that provides a user-friendly interface for users to select a date or time in a mobile application. The Date Picker component in React Native offers various functionalities and customization options. It supports different date and time formats, such as year, month, day, hour, minute, and second. It also provides presentation styles, event handlers, and many more functionality for developers to implement for users.

It provides three basic modes, including. 

• Time 
• Date
• DateTime 

It is implemented in 2 ways (Models) which are: 

• Model
• Inlined

It provides many props for customization, such as 

• Date
• onDateChange
• maximumDate
• minimumDate..etc.

React Native Date Picker Libraries

React Native offers several libraries to integrate date pickers into your app. These libraries allow you to provide a user-friendly and visually appealing way for users to select dates. Here are a few popular options:

1. React Native DateTimePicker

• Library: @react-native-community/datetimepicker
• Features:
  • Native date and time picker components for iOS and Android.
  • Customizable options for mode (date, time, or datetime).
  • Provides smooth integration with device themes.

2. React Native Modal Date Picker

• Library: react-native-modal-datetime-picker
• Features:
  • Fully customizable modal-based date and time picker.
  • Supports dark mode and various locales.
  • Easy to use with a clean API.

3. React Native Date Picker

• Library: react-native-date-picker
• Features:
  • Highly customizable date picker.
  • Supports different modes (date, time, datetime).
  • Includes localization for various languages.

Creating a Date Picker for Your React Native App

To create a date picker for your React Native app, follow these steps:

1. Choose a Library
Select a library based on your app's requirements. For instance:

• Use @react-native-community/datetimepicker for a native look and feel.
• Choose react-native-modal-datetime-picker for a modal experience.
• Opt for react-native-date-picker for high customizability.

2. Install the Library
Install the selected library using npm or yarn. For example:

3. Implement the Date Picker
Add the date picker component to your app and configure its options like mode, display style, and localization.

4. Handle User Interaction
Use state management to handle the selected date and provide feedback to the user.

Different Modes of Date Picker React Native

1. Time Picker

The time mode can be used when only the time matters. AM/PM will be added depending on the locale and user setting. It can be useful to add the timeInterval to only display the time with, for instance, 15min intervals. 

Set mode property to time to show the time picker:

<DatePicker
  ...
  mode="time"
/>

2. Datepicker

The date mode displays a react native date picker with year, month, and date where the year-month-date order will be adjusted to the locale. 

Just add the value date to the mode property:

<DatePicker
  ...
  mode="date"
/>

3. Date Time Picker 

The datetime mode gives you a react native date time picker where both date and time can be selected simultaneously. The today date will be replayed with the string "Today" translated to the desired language. 

Add the optional datetime mode property to use this mode. Since datetime is default, this could also be excluded.

<DatePicker
  ...
  mode="datetime"
/>

Implementations of Date Picker React Native 

Example 1: Modal

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

Example 2: Inlined

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())

  return <DatePicker date={date} onDateChange={setDate} />
}

Props in Date Picker

Frequently Asked Questions

How do I create a custom date picker in react-native?

To create a custom date picker, install a library like react-native-datepicker, import it, and tailor its appearance and behaviour in your React Native component, incorporating event handlers for selected dates.

How do I use the react-native calendar picker?

To use react-native calendar picker you can utilize the react-native-calendar-picker library by installing it, importing the CalendarPicker component, and seamlessly integrating it into your JSX. Configure props such as onDateChange for date selections and customize appearance using available options.

What is the use of a react-native date picker?

React Native Date Picker is used to allow users to select dates or times from a calendar or clock interface in mobile apps. It provides a convenient way to input and handle date/time information in a user-friendly manner.

How do I change the date order? (To YYYY-MM-DD etc)

To change the date order in React Native Date Picker, you can modify the locale configuration. By setting the appropriate locale, you can specify the desired date format and change the order of the day, month, and year.

Conclusion

This article explains the date picker in React Native. Basic Information about React Native is present in this article with an installation guide to the date picker module and different properties, models, and attributes of date picker in React Native.
We hope this blog has helped you enhance your knowledge of the React Native datepicker. If you want to learn more, then check out our articles.

• Getting started with React
• Difference Between ReactJs and React Native