react-native-datetimepicker-modal


> React Native DateTimePicker Modal Component for iOS/Android

Table of Contents

- react-native-datetimepicker-modal
- Table of Contents
- Dependency
- Install
- Usage
- Properties
- children
- value
- modalButtonText
- Styling
- Contribute
- License
- Credits

Dependency

React Native Community Date/Time Picker (https://github.com/react-native-community/datetimepicker)

Install

``sh
$ npm i react-native-datetimepicker-modal
$ # OR
$ yarn add react-native-datetimepicker-modal
`

Usage

`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 (
value={birthDate}
onChange={(event, date) => setBirthDate(date)}
show={show}
toggle={toggle}
>
Birth Day

{birthDate ? moment(birthDate).format('MMMM DD, YYYY') : '-'}


);
}
`

Properties

Component accepts the following properties. Please see propTypes for more detail.

Also, please refer to React Native Community - DateTimePicker's documentation for more details.

$3

Component you want to render.

$3

Start date for DateTimePicker.

$3

Text string for the iOS modal button (default: "Done")

$3

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 |

Contribute

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

License

MIT

Credits

Thanks to @Tiaan for the original idea. I just forked the project to apply the more recent version of RN and DateTimePicker.