4.11.0 • Published 8 years ago

react-native-modal-datetime-picker-nevo v4.11.0

Weekly downloads
7
License
ISC
Repository
github
Last release
8 years ago

react-native-modal-datetime-picker

npm version styled with prettier

A declarative cross-platform react-native datetime-picker.

Description

This library exposes a cross-platform interface for showing the native date and time pickers inside a modal.
You will have an unified user experience, you won't have to worry anymore about testing the device platform and you won't have to programmatically call the Android TimePicker/DatePicker APIs.

Demo

Setup

This library is available on npm, install it with npm install --save react-native-modal-datetime-picker or yarn add react-native-modal-datetime-picker.

Usage

import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';

export default class DateTimePickerTester extends Component {
  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 (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showDateTimePicker}>
          <Text>Show TimePicker</Text>
        </TouchableOpacity>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
        />
      </View>
    );
  }

}

Available props

NameTypeDefaultDescription
cancelTextIOSstring'Cancel'The text on the cancel button on iOS
confirmTextIOSstring'Confirm'The text on the confirm button on iOS
customCancelButtonIOSnodeA custom component for the cancel button on iOS
customConfirmButtonIOSnodeA custom component for the confirm button on iOS
customTitleContainerIOSnodeA custom component for the title container on iOS
datePickerContainerStyleIOSstyleThe style of the container on iOS
reactNativeModalPropsIOSobjectAdditional props for react-native-modal on iOS
dateobjnew Date()Initial selected date/time
isVisibleboolfalseShow the datetime picker?
modestring'date'Datepicker? 'date' Timepicker? 'time' Both? 'datetime'
datePickerModeAndroidstring'calendar'Display as 'spinner' or 'calendar'
onConfirmfuncREQUIREDFunction called on date picked
onHideAfterConfirmfunc() => {}Called after the hiding animation if a date was picked
onCancelfuncREQUIREDFunction called on dismiss
titleIOSstring'Pick a date'The title text on iOS
minimumDateDateundefinedMin Date. Does not work with 'time' picker on Android.
maximumDateDateundefinedMax Date. Does not work with 'time' picker on Android.
is24HourbooltrueIf false, the picker shows an AM/PM chooser on Android

All the DatePickerIOS props are also supported!

Notes

Just remember to always set the isVisible prop to false in both onConfirm and onCancel (like in the example above).

Under the hood this library is using react-native-modal for the iOS modal implementation.

Pull requests and suggestions are welcome!