Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Jul 9, 2024
Medium

React Native Date Picker

Author Arya Singh
4 upvotes
Table of contents
Learn to use AI Tools & ChatGPT to excel as Microsoft SDE
11 Jul, 2024 @ 01:30 PM
Speaker
Pranav Malik
SDE 2 @

Technology is overgrowing in today's world, resulting in a boom in producing innovative apps and software. We want to make our daily life easier. It becomes easier for individuals to build technological answers. The rise of user-friendly development tools and robust frameworks like React Native has made it very easy to create applications and software. 

People without programming experience can now learn to develop their applications and software. 

React Native Date Picker


In this article, we will learn about the React native date picker's implementation, different modes, etc.

Let’s first be familiar with what is react native.

What is React Native?

React Native is an Open-Source project developed by Facebook. It is a combination of JavaScript and React components that helps to develop Mobile Applications on any platform. (IOS or Android). Developers do not have to learn different codes for different platforms. They can learn React Native, and it will automatically convert the Code to Native UI elements on runtime. This cross-platform feature makes React Native popular for businesses and developers who want to work seamlessly across multiple platforms. 

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:

critical components provided by React Native
  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

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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.

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

Props

Description

dateThe currently selected date.
onDateChangeDate change handler ( Inline only )
fadeToColorAndroid picker is fading towards this background color. {color, 'none'}
maximumDate

Maximum selectable date.

Example: new Date("2021-12-31")

 

minimumDate

Minimum selectable date.

Example: new Date("2021-01-01")

 

androidVariantChoose from 2 Android style variants. "iosClone," "nativeAndroid"
minuteIntervalThe interval at which minutes can be selected.
modeThe date picker mode. "datetime," "date," "time"
localeThe locale for the date picker. Changes language, date order, and am/pm preferences. Value needs to be a Locale ID.
textColorChanges the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher.
timeZoneOffsetInMinutesTimezone offset in minutes (default: device's timezone)
dividerHeightChange the divider height (only supported for iosClone)
is24hourSourceChange how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device')
modalBoolean indicating if a modal should be used. Default: "false." When enabled, the other modal props need to be used. See example.
openModal only: Boolean indicating if modal should be open.
onConfirmModal only: Date callback when the user presses confirm button
onCancelModal only: Callback for when the user presses the cancel button or closes the modal by pressing outside it.
titleModal only: Title text. Can be set to null to remove text.
confirmTextModal only: Confirm button text.
cancelTextModal only: Cancel button text.
themeModal only: The theme of the modal. "light", "dark", "auto". Defaults to "auto".

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.

You may refer to our Guided Path on Code360 for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning!

Previous article
Alert in React Native
Next article
React Native Gesture Handler