React Native DateTimePicker Modal Component for iOS/Android. Forked from https://github.com/tiaanduplessis/react-native-datepicker-modal and contains a major dependency on https://github.com/react-native-community/datetimepicker.
npm install react-native-datetimepicker-modal








> React Native DateTimePicker Modal Component for iOS/Android
- react-native-datetimepicker-modal
- Table of Contents
- Dependency
- Install
- Usage
- Properties
- children
- value
- modalButtonText
- Styling
- Contribute
- License
- Credits
React Native Community Date/Time Picker (https://github.com/react-native-community/datetimepicker)
``sh`
$ npm i react-native-datetimepicker-modal
$ # OR
$ yarn add react-native-datetimepicker-modal
`js
import React, { useState } from 'react';
import moment from 'moment';
import { StyleSheet, Text } from 'react-native';
import DateTimePickerModal from 'react-native-datetimepicker-modal';
const Example = () => {
const [birthDate, setBirthDate] = useState(new Date());
const [show, showModal] = useState(false);
const toggle = () => showModal(!show);
return (
onChange={(event, date) => setBirthDate(date)}
show={show}
toggle={toggle}
>
{birthDate ? moment(birthDate).format('MMMM DD, YYYY') : '-'}
);
}
`
Component accepts the following properties. Please see propTypes for more detail.
Also, please refer to React Native Community - DateTimePicker's documentation for more details.
Component you want to render.
Start date for DateTimePicker.
Text string for the iOS modal button (default: "Done")
Styling for different sub-components can also be configured, this is only applicable in iOS:
| Name | Description |
| ---------------------- | -------------------------------------------- |
| touchableStyle | Styles for the container of children` |
| modalButtonStyle | Styles for the modal button on iOS |
| modalBtnContainerStyle | Styles for the modal button container on iOS |
| modalStyle | Styles for the modal on iOS |
| modalOverlayStyle | Styles for the modal overlay on iOS |
1. Fork it and create your feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -am 'Add some feature'
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request
MIT
Thanks to @Tiaan for the original idea. I just forked the project to apply the more recent version of RN and DateTimePicker.