react-native-modal-datetime-picker
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
;;; state = isDateTimePickerVisible: false ; this; this; { console; this; }; { return <View style= flex: 1 > <TouchableOpacity onPress=this_showDateTimePicker> <Text>Show TimePicker</Text> </TouchableOpacity> <DateTimePicker isVisible=thisstateisDateTimePickerVisible onConfirm=this_handleDatePicked onCancel=this_hideDateTimePicker /> </View> ; }
Available props
Name | Type | Default | Description |
---|---|---|---|
cancelTextIOS | string | 'Cancel' | The text on the cancel button on iOS |
confirmTextIOS | string | 'Confirm' | The text on the confirm button on iOS |
customCancelButtonIOS | node | A custom component for the cancel button on iOS | |
customConfirmButtonIOS | node | A custom component for the confirm button on iOS | |
customTitleContainerIOS | node | A custom component for the title container on iOS | |
datePickerContainerStyleIOS | style | The style of the container on iOS | |
reactNativeModalPropsIOS | object | Additional props for react-native-modal on iOS | |
date | obj | new Date() | Initial selected date/time |
isVisible | bool | false | Show the datetime picker? |
mode | string | 'date' | Datepicker? 'date' Timepicker? 'time' Both? 'datetime' |
datePickerModeAndroid | string | 'calendar' | Display as 'spinner' or 'calendar' |
onConfirm | func | REQUIRED | Function called on date picked |
onHideAfterConfirm | func | () => {} | Called after the hiding animation if a date was picked |
onCancel | func | REQUIRED | Function called on dismiss |
titleIOS | string | 'Pick a date' | The title text on iOS |
minimumDate | Date | undefined | Min Date. Does not work with 'time' picker on Android. |
maximumDate | Date | undefined | Max Date. Does not work with 'time' picker on Android. |
is24Hour | bool | true | If 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!