Home
Categories
Date & Time
React Native Date/Time/Year/Month Picker for iOS, Android & Web

React Native Date/Time/Year/Month Picker for iOS, Android & Web

s77rt First listed on October 22, 2025
Live Demo Download Source Code

Description:

A native component for React Native applications that provides a consistent UI for selecting dates, times, datetimes, and year-month combinations across multiple platforms like iOS, Android, and Web.

Features

  • 📅 Native date, time, datetime, and yearmonth picker components
  • 🔌 Cross-platform support for iOS, Android, and web
  • 🎯 Single and multiple date selection modes
  • 💎 Modal and inline display options
  • ✨ Extensive customization through props and styles
  • 🌙 Localization support for international applications
  • ⚙️ Configurable display modes including compact and graphical

Use Cases

  • Event scheduling applications requiring date and time selection
  • Booking systems with multiple date selection capabilities
  • Forms requiring consistent date input across platforms
  • Applications needing inline calendar displays
  • Projects requiring localized date pickers for global audiences

How to Use It

1. Install the react-native-date-picker component.

npm install @s77rt/react-native-date-picker
yarn add @s77rt/react-native-date-picker

2. To use the picker in a modal, you need a ref to control its visibility and state to hold the selected value. The showPicker method on the ref instance displays the modal to the user.

import React, { useRef, useState } from 'react';
import { Button, Text, View } from 'react-native';
import { DatePicker } from "@s77rt/react-native-date-picker";
import type { DatePickerHandle } from "@s77rt/react-native-date-picker";
function ModalPickerExample() {
   const datePickerRef = useRef<DatePickerHandle>(null);
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
   return (
      <View>
         <Text>Date: {selectedDate?.toLocaleDateString()}</Text>
         <Button
            title="Select a Date"
            onPress={() => datePickerRef.current?.showPicker()}
         />
         <DatePicker
            ref={datePickerRef}
            type="date"
            value={selectedDate}
            onChange={setSelectedDate}
         />
      </View>
   );
}

3. Set the inline prop to true to render the picker directly within a view. This approach does not require a ref, as the component is always visible.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { DatePicker } from "@s77rt/react-native-date-picker";
function InlinePickerExample() {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
   return (
      <View>
         <Text>Date: {selectedDate?.toLocaleDateString()}</Text>
         <DatePicker
            type="date"
            value={selectedDate}
            onChange={setSelectedDate}
            inline
         />
      </View>
   );
}

4. To allow users to select multiple dates, add the multiple prop. The value prop should be an array of Date objects, and the onChange callback will receive an array. This mode requires the inline prop.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { DatePicker } from "@s77rt/react-native-date-picker";
function MultipleDatePickerExample() {
   const [selectedDates, setSelectedDates] = useState<Date[]>([]);
   return (
      <View>
         <Text>
            Selected: {selectedDates.map(date => date.toLocaleDateString()).join(', ')}
         </Text>
         <DatePicker
            type="date"
            value={selectedDates}
            onChange={setSelectedDates}
            multiple
            inline
         />
      </View>
   );
}

5. You can customize the picker’s behavior and appearance through the options and styles props. For performance, wrap these prop objects with the useMemo hook.

The options prop configures functionality like locale and button text. The styles prop controls visual elements such as colors.

import React, { useState, useMemo } from 'react';
import { DatePicker } from "@s77rt/react-native-date-picker";
function CustomPickerExample() {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const pickerOptions = useMemo(() => ({
      locale: 'en-GB',
      confirmText: 'Confirm',
      cancelText: 'Dismiss',
   }), []);
   const pickerStyles = useMemo(() => ({
      accentColor: '#007AFF',
      selectedDayContainerColor: '#007AFF',
   }), []);
   return (
      <DatePicker
         type="date"
         value={selectedDate}
         onChange={setSelectedDate}
         inline
         options={pickerOptions}
         styles={pickerStyles}
      />
   );
}

6. All component props.

  • ref: A ref object to imperatively control the picker, primarily to show it when in modal mode.
  • type: Specifies the picker type. Accepted values are date, time, datetime, or yearmonth.
  • value: The currently selected date or dates. This can be a Date object, null, or an array of Date objects for multiple selections.
  • onChange: A callback function that is executed when the user selects a new date or dates.
  • min: A Date object that defines the earliest selectable date.
  • max: A Date object that defines the latest selectable date.
  • step: A number representing the time interval in seconds for the time picker.
  • multiple: A boolean that, when true, allows the user to select multiple dates.
  • inline: A boolean that, when true, renders the picker directly in the view instead of a modal.
  • options: A memoized object for configuring the picker’s behavior and text.
  • styles: A memoized object for customizing the picker’s appearance.

7. All possible options.

  • locale: Sets the locale for the picker using a BCP-47 identifier string.
  • confirmText: Custom text for the confirm button.
  • cancelText: Custom text for the cancel button.
  • mode: Sets the display mode. Can be compact, graphical, or wheel.
  • title: The title text displayed on the picker.
  • headline: The headline text displayed on the picker.
  • showModeToggle: A boolean to control the visibility of the mode toggle UI.
  • is24Hour: A boolean that sets the time picker to a 24-hour format when true.

8. All style options

  • accentColor: The primary color used for highlighting selected items and controls.
  • containerColor: The background color of the picker container.
  • titleContentColor: The color of the title text.
  • headlineContentColor: The color of the headline text.
  • weekdayContentColor: The color of the weekday labels.
  • subheadContentColor: The color for the month and year subheadings.
  • navigationContentColor: The color of the year and navigation arrow buttons.
  • yearContentColor: The color of the year text.
  • disabledYearContentColor: The color of year text for disabled years.
  • currentYearContentColor: The color of the current year’s text.
  • selectedYearContentColor: The text color for a selected year.
  • disabledSelectedYearContentColor: The text color for a disabled selected year.
  • selectedYearContainerColor: The background color for a selected year.
  • disabledSelectedYearContainerColor: The background color for a disabled selected year.
  • dayContentColor: The color of the day number text.
  • disabledDayContentColor: The color of disabled day number text.
  • selectedDayContentColor: The text color for a selected day.
  • disabledSelectedDayContentColor: The text color for a disabled selected day.
  • selectedDayContainerColor: The background color for a selected day.
  • disabledSelectedDayContainerColor: The background color for a disabled selected day.
  • todayContentColor: The text color for the current day.
  • todayDateBorderColor: The border color for the current day.
  • dayInSelectionRangeContainerColor: The background color for days within a selected range.
  • dayInSelectionRangeContentColor: The text color for days within a selected range.
  • dividerColor: The color of the divider line.
  • clockDialColor: The background color of the clock face.
  • selectorColor: The color of the clock hand and selector.
  • periodSelectorBorderColor: The border color for the AM/PM selector.
  • clockDialSelectedContentColor: The text color for the selected time on the clock.
  • clockDialUnselectedContentColor: The text color for unselected times on the clock.
  • periodSelectorSelectedContainerColor: The background color for the selected AM/PM period.
  • periodSelectorUnselectedContainerColor: The background color for the unselected AM/PM period.
  • periodSelectorSelectedContentColor: The text color for the selected AM/PM period.
  • periodSelectorUnselectedContentColor: The text color for the unselected AM/PM period.
  • timeSelectorSelectedContainerColor: The background color for the selected time input.
  • timeSelectorUnselectedContainerColor: The background color for the unselected time input.
  • timeSelectorSelectedContentColor: The text color for the selected time input.
  • timeSelectorUnselectedContentColor: The text color for the unselected time input.

Related Resources

FAQs

Q: How do you limit the selectable date range?
A: You can use the min and max props. Pass Date objects to these props to define the earliest and latest selectable dates.

Q: How can I change the language of the picker?
A: You can set the locale property within the options prop. It accepts a BCP-47 language tag, such as ‘fr-FR’ for French.

Q: Is it possible to select a range of dates?
A: Yes, you can enable multi-date selection by setting the multiple prop to true. This configuration works with the inline display mode.

Tags:, , ,

More Like This

Add Comment