7.6.2 • Published 5 years ago

react-native-modal-datetime-picker-r17 v7.6.2

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

react-native-modal-datetime-picker

npm version Supports Android and iOS

A declarative cross-platform react-native datetime-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-modal for the iOS modal implementation.

⚠️ NEW RELEASE INCOMING (v8)

Hey 👋!
The react-native date and time pickers have recently been moved to a new @react-native-community repository.
If you're installing react-native-modal-datetime-picker for the first time it is highly recommended to install the new latest pre-release, which is compatible with the @react-native-community pickers.
To do so, please follow this README.md instructions and ignore all the steps below.

If you're a long-time react-native-modal-datetime-picker user, please notice that there are some breaking changes in the new release.

For more info please see #301.

V7 (Stable version) Instructions

Setup

Install the library using npm or yarn:

# using npm
$ npm install react-native-modal-datetime-picker --save

# using yarn
$ yarn add react-native-modal-datetime-picker

Usage

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

export default class DateTimePickerTester extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDateTimePickerVisible: false
    };
  }

  showDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: true });
  };

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };

  handleDatePicked = date => {
    console.log("A date has been picked: ", date);
    this.hideDateTimePicker();
  };

  render() {
    return (
      <>
        <Button title="Show DatePicker" onPress={this.showDateTimePicker} />
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this.handleDatePicked}
          onCancel={this.hideDateTimePicker}
        />
      </>
    );
  }
}

Available props

NameTypeDefaultDescription
cancelTextIOSstring'Cancel'The text on the cancel button on iOS
cancelTextStylestyleThe style of the cancel button text on iOS
confirmTextIOSstring'Confirm'The text on the confirm button on iOS
confirmTextStylestyleThe style of the confirm button text on iOS
customCancelButtonIOSnodeA custom component for the cancel button on iOS
customConfirmButtonIOSnodeA custom component for the confirm button on iOS
customDatePickerIOSnodeA custom component that will replace the default DatePicker on iOS (Example)
customTitleContainerIOSnodeA custom component for the title container on iOS
dateobjnew Date()Initial selected date/time
datePickerContainerStyleIOSstyleThe style of the container on iOS
datePickerModeAndroidstring'default'Display as 'spinner' or 'calendar' or 'default' (based on Android version)
dismissOnBackdropPressIOSbooltrueDismiss the picker on backdrop press (on iOS)?
hideTitleContainerIOSboolfalseIf true, hide the modal title container on iOS
is24HourbooltrueIf false, the picker shows an AM/PM chooser on Android
isDarkModeEnabledboolfalseIs the dark mode enabled?
isVisibleboolfalseShow the datetime picker?
maximumDateDateundefinedMax Date. Does not work with 'time' picker on Android
minimumDateDateundefinedMin Date. Does not work with 'time' picker on Android
minuteIntervalnumber1Interval for time picker on iOS
modestring'datetime'Choose between 'date', 'time', and 'datetime'
neverDisableConfirmIOSboolfalseIf true, do not disable the confirm button on any touch events; see #82
onCancelfuncREQUIREDFunction called on dismiss
onConfirmfuncREQUIREDFunction called on date or time picked. It returns the date or time as a JavaScript Date object
onHideAfterConfirmfunc() => {}Called after the hiding animation if a date was picked
pickerRefCbfuncCalled after picker has mounted, contains a ref
reactNativeModalPropsIOSobjectAdditional props for react-native-modal on iOS
timePickerModeAndroidstring'default'Display as 'spinner' or 'clock' or 'default' (based on Android version)
titleIOSstring'Pick a date'The title text on iOS
titleStylestyleThe style of the title text on iOS

All the DatePickerIOS props are also supported!

Frequently Asked Questions

The component is not working as expected

Under the hood react-native-modal-datetime-picker uses react-native original DatePickerAndroid, TimePickerAndroid and DatePickerIOS. Before reporting a bug, try swapping react-native-datetime-picker with react-native original date/time pickers and, if the issue persists, check if it has already been reported as a react-native issue.

How can I show the timepicker instead of the datepicker?

Just 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 selected start date being shown in the input field of the end date?

If you have both a start date/time and end date/time picker on the same screen, you will need to have showDateTimePicker, hideDateTimePicker, and handleDatePicked functions for both.

showStartDateTimePicker = () =>
  this.setState({ startDateTimePickerVisible: true });

showEndDateTimePicker = () => this.setState({ endDateTimePickerVisible: true });

hideStartDateTimePicker = () =>
  this.setState({ startDateTimePickerVisible: false });

hideEndDateTimePicker = () =>
  this.setState({ endDateTimePickerVisible: false });

handleStartDatePicked = date => {
  console.log("A date has been picked: ", date);
  this.hideStartDateTimePicker();
};

handleEndDatePicked = date => {
  console.log("A date has been picked: ", date);
  this.hideEndDateTimePicker();
};

How do I change the color of the Android date and time pickers?

This is more a React-Native specific question than a react-native-modal-datetime-picker one.
See issue #29 and #106 for some solutions.

How to set 24 hours in iOS ?

The is24Hour prop is only available on Android but you can use a small hack for enabling it on iOS by setting the picker timezone to en_GB:

<DatePicker
  mode="time"
  locale="en_GB" // Use "en_GB" here
  date={new Date()}
/>

How to set automatic locale in iOS

Datepicker can adjust by itself locale (fr_FR, en_GB...) depending user's device locale. Edit your AppDelegate.m file, and add:

// Force DatePicker locale to current language (for: 24h or 12h format, full day names etc...)
NSString *currentLanguage = [[NSLocale preferredLanguages] firstObject];
[[UIDatePicker appearance] setLocale:[[NSLocale alloc]initWithLocaleIdentifier:currentLanguage]];

I can't see the picker on iOS / the picker is white on iOS

You're app is probably running in dark mode, which is not supported by React-Native for the pickers yet.
For a workaround, see the "Is the iOS dark mode supported?" section below 👇

Is the iOS dark mode supported?

iOS 13 dark mode is not supported out-of-the-box yet and requires a bit of manual setup: 1. Install and link react-native-appearance 2. Use it to detect the device color scheme: const colorScheme = Appearance.getColorScheme(); 3. Use the color scheme to enable/disable the react-native-modal-datetime-picker dark mode trough the isDarkModeEnabled prop: isDarkModeEnabled: colorScheme === 'dark'

How do I make it work with snapshot testing?

See issue #216 for a possible workaround.

Contributing

Please see the contributing guide.

License

The library is released under the MIT license. For more information see LICENSE.