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

1$ npm i react-native-datetimepicker-modal
2$ # OR
3$ yarn add react-native-datetimepicker-modal

Usage

1import React, { useState } from 'react';
2import moment from 'moment';
3import { StyleSheet, Text } from 'react-native';
4import DateTimePickerModal from 'react-native-datetimepicker-modal';
5
6const Example = () => {
7  const [birthDate, setBirthDate] = useState(new Date());
8  const [show, showModal] = useState(false);
9  const toggle = () => showModal(!show);
10  return (
11    <DateTimePickerModal
12      value={birthDate}
13      onChange={(event, date) => setBirthDate(date)}
14      show={show}
15      toggle={toggle}
16    >
17      <Text>Birth Day</Text>
18      <Text>
19        {birthDate ? moment(birthDate).format('MMMM DD, YYYY') : '-'}
20      </Text>
21    </DateTimePickerModal>
22  );
23}

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.

children

Component you want to render.

value

Start date for DateTimePicker.

modalButtonText

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

Styling

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.