react-native-modal-datetime-picker

A declarative cross-platform react-native date and time picker.

This library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal, providing a unified user and developer experience.

Under the hood, this library is using @react-native-community/datetimepicker.

Setup (for non-Expo projects)

If your project is not using Expo, install the library and the community date/time picker using npm or yarn:

# using npm
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

# using yarn
$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

Please notice that the @react-native-community/datetimepicker package is a native module so it might require manual linking.

Setup (for Expo projects)

If your project is using Expo, install the library and the community date/time picker using the Expo CLI:

npx expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

To ensure the picker theme respects the device theme, you should also configure the appearance styles in your app.json this way:

{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

Refer to the Appearance documentation on Expo for more info.

Usage

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

Available props

👉 Please notice that all the @react-native-community/react-native-datetimepicker props are supported as well!

Name	Type	Default	Description
`buttonTextColorIOS`	string		The color of the confirm button texts (iOS)
`backdropStyleIOS`	style		The style of the picker backdrop view style (iOS)
`cancelButtonTestID`	string		Used to locate cancel button in end-to-end tests
`cancelTextIOS`	string	"Cancel"	The label of the cancel button (iOS)
`confirmButtonTestID`	string		Used to locate confirm button in end-to-end tests
`confirmTextIOS`	string	"Confirm"	The label of the confirm button (iOS)
`customCancelButtonIOS`	component		Overrides the default cancel button component (iOS)
`customConfirmButtonIOS`	component		Overrides the default confirm button component (iOS)
`customHeaderIOS`	component		Overrides the default header component (iOS)
`customPickerIOS`	component		Overrides the default native picker component (iOS)
`date`	obj	new Date()	Initial selected date/time
`isVisible`	bool	false	Show the datetime picker?
`isDarkModeEnabled`	bool?	undefined	Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS)
`modalPropsIOS`	object	{}	Additional modal props for iOS
`modalStyleIOS`	style		Style of the modal content (iOS)
`mode`	string	"date"	Choose between "date", "time", and "datetime"
`onCancel`	func	REQUIRED	Function called on dismiss
`onChange`	func	() => null	Function called when the date changes (with the new date as parameter).
`onConfirm`	func	REQUIRED	Function called on date or time picked. It returns the date or time as a JavaScript Date object
`onHide`	func	() => null	Called after the hide animation
`pickerContainerStyleIOS`	style		The style of the picker container (iOS)
`pickerStyleIOS`	style		The style of the picker component wrapper (iOS)
`pickerComponentStyleIOS`	style		The style applied to the actual picker component - this can be either a native iOS picker or a custom one if `customPickerIOS` was provided

Frequently Asked Questions

This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question. If you're experiencing issues, please check the FAQs below.
For questions and support, please start try starting a discussion or try asking it on StackOverflow.
⚠️ Please use the GitHub issues only for well-described and reproducible bugs. Question/support issues will be closed.

The component is not working as expected, what should I do?

Under the hood react-native-modal-datetime-picker uses @react-native-community/datetimepicker. If you're experiencing issues, try swapping react-native-datetime-picker with @react-native-community/datetimepicker. If the issue persists, check if it has already been reported as a an issue or check the other FAQs.

How can I show the timepicker instead of the datepicker?

Set the mode prop to time. You can also display both the datepicker and the timepicker in one step by setting the mode prop to datetime.

Why is the initial date not working?

Please make sure you're using the date props (and not the value one).

Can I use the new iOS 14 style for the date/time picker?

Yes!
You can set the display prop (that we'll pass down to react-native-datetimepicker) to inline to use the new iOS 14 picker.

Please notice that you should probably avoid using this new style with a time-only picker (so with mode set to time) because it doesn't suit well this use case.

Why does the picker show up twice on Android?

This seems to be a known issue of the @react-native-community/datetimepicker. Please see this thread for a couple of workarounds. The solution, as described in this reply is hiding the modal, before doing anything else.

<details><summary>Example of solution using Input + DatePicker</summary> The most common approach for solving this issue when using an <code>Input</code> is: <ul> <li>Wrap your <code>Input</code> with a "<code>Pressable</code>"/<code>Button</code>