react-native-paper-datetimepicker

A React Native Paper TextInput for picking date or time

• In Android and iOS, the DateTimePicker component is a non-editable TextInput wrapped by a TouchableRipple. When the touchable is clicked, the component uses Matteo Mazzarolo's react-native-modal-datetime-picker to change the input value. The code was heavily inspired by Fateh Farooqui's react-native-paper-dropdown and my own fork of it.

• In the web, the DateTimePicker component is a date input or time input wrapped by a TextInput. The value can be either typed or chosen from a popup.

  

Peer dependencies

{
    "@react-native-community/datetimepicker": "6.1.2",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-modal-datetime-picker": "13.1.2",
    "react-native-paper": "4.12.3"
}

Install

With npm:

npm install @hashiprobr/react-native-paper-datetimepicker

With yarn:

yarn add @hashiprobr/react-native-paper-datetimepicker

If using Expo, add the module to webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                '@hashiprobr/react-native-paper-datetimepicker',
            ],
        },
    }, argv);
    return config;
};

If webpack.config.js does not exist, create it with:

expo customize:web

Props

| name | description | |----------------------|-------------| | type | 'date' or 'time' (default 'date') | | value | the current date (required) | | onChangeDate | called when the date has changed (required) | | disabled | equivalent to the TouchableRipple disabled prop and the TextInput disabled prop | | onFocus | equivalent to the TouchableRipple onFocus prop | | onBlur | equivalent to the TouchableRipple onBlur prop | | style | all properties except flexGrow, alignSelf, and margins are applied to the inner TextInput; flexGrow, alignSelf, and margins are applied to the outer TouchableRipple | | theme | equivalent to the TouchableRipple theme prop and the TextInput theme prop | | editable | if false, clicking on the component has no effect (default true) | | borderless | equivalent to the TouchableRipple borderless prop | | background | equivalent to the TouchableRipple background prop | | centered | equivalent to the TouchableRipple centered prop | | rippleColor | equivalent to the TouchableRipple rippleColor prop | | underlayColor | equivalent to the TouchableRipple underlayColor prop | | touchableStyle | all properties except flexGrow, alignSelf, and margins are applied to the outer TouchableRipple | | mode | equivalent to the TextInput mode prop | | label | equivalent to the TextInput label prop | | error | equivalent to the TextInput error prop | | selectionColor | equivalent to the TextInput selectionColor prop | | underlineColor | equivalent to the TextInput underlineColor prop | | activeUnderlineColor | equivalent to the TextInput activeUnderlineColor prop | | outlineColor | equivalent to the TextInput outlineColor prop | | activeOutlineColor | equivalent to the TextInput activeOutlineColor prop | | dense | equivalent to the TextInput dense prop | | iconColor | equivalent to the TextInput.Icon color prop | | iconStyle | equivalent to the TextInput.Icon style prop |

Example

import React, { useState } from 'react';

import { View } from 'react-native';

import { Provider } from 'react-native-paper';

import { DateTimePicker } from '@hashiprobr/react-native-paper-datetimepicker';

export default function MyComponent() {
    const [date, setDate] = useState(new Date());

    return (
        <Provider>
            <View>
                <DateTimePicker
                    type="date"
                    value={date}
                    onChangeDate={setDate}
                />
            </View>
        </Provider>
    );
}