# @hashiprobr/react-native-paper-datetimepicker > A React Native Paper Component for picking date or time Latest version **1.2.0** (published 2023-04-26) · ISC license · 0 weekly downloads ## Install ```sh npm install @hashiprobr/react-native-paper-datetimepicker pnpm add @hashiprobr/react-native-paper-datetimepicker yarn add @hashiprobr/react-native-paper-datetimepicker bun add @hashiprobr/react-native-paper-datetimepicker ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2023-04-26 | | First published | 2021-12-30 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 82.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Marcelo Hashimoto | | Maintainers | hashiprobr | | Keywords | JavaScript, React, React Native, React Native Paper, React Native Paper Component, DateTimePicker, Material Design | ## Links - npm: https://www.npmjs.com/package/@hashiprobr/react-native-paper-datetimepicker - Repository: https://github.com/hashiprobr/react-native-paper-datetimepicker - Homepage: https://github.com/hashiprobr/react-native-paper-datetimepicker#readme - Issues: https://github.com/hashiprobr/react-native-paper-datetimepicker/issues - npm.io page: https://npm.io/package/@hashiprobr/react-native-paper-datetimepicker ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2023-04-26 - 1.1.20 — 2022-10-11 - 1.0.20 — 2022-07-24 - 1.0.19 — 2022-07-24 - 1.0.18 — 2022-01-20 - 1.0.17 — 2022-01-12 - 1.0.16 — 2022-01-10 - 1.0.15 — 2022-01-10 - 1.0.14 — 2022-01-10 - 1.0.13 — 2022-01-05 - 1.0.12 — 2022-01-05 - 1.0.11 — 2022-01-05 - 1.0.10 — 2022-01-05 - 1.0.9 — 2022-01-05 - 1.0.7 — 2022-01-05 - … 7 more at https://npm.io/package/@hashiprobr/react-native-paper-datetimepicker/versions ## README 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](https://github.com/mmazzarolo)'s [react-native-modal-datetime-picker](https://github.com/mmazzarolo/react-native-modal-datetime-picker) to change the input value. The code was heavily inspired by [Fateh Farooqui](https://github.com/fateh999)'s [react-native-paper-dropdown](https://fateh999.github.io/react-native-paper-dropdown/#/) and [my own fork of it](https://github.com/hashiprobr/react-native-paper-dropdown). * In the web, the DateTimePicker component is a [date input](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input/date) or [time input](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input/time) wrapped by a TextInput. The value can be either typed or chosen from a popup. ![](img/date.gif) ![](img/time.gif) Peer dependencies ----------------- ``` json { "@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`: ``` 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](https://callstack.github.io/react-native-paper/touchable-ripple.html#disabled) and the [TextInput disabled prop](https://callstack.github.io/react-native-paper/text-input.html#disabled) | | onFocus | equivalent to the [TouchableRipple onFocus prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#onFocus) | | onBlur | equivalent to the [TouchableRipple onBlur prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#onBlur) | | 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](https://callstack.github.io/react-native-paper/touchable-ripple.html#theme) and the [TextInput theme prop](https://callstack.github.io/react-native-paper/text-input.html#theme) | | editable | if false, clicking on the component has no effect (default `true`) | | borderless | equivalent to the [TouchableRipple borderless prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#) | | background | equivalent to the [TouchableRipple background prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#background) | | centered | equivalent to the [TouchableRipple centered prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#centered) | | rippleColor | equivalent to the [TouchableRipple rippleColor prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#rippleColor) | | underlayColor | equivalent to the [TouchableRipple underlayColor prop](https://callstack.github.io/react-native-paper/touchable-ripple.html#underlayColor) | | touchableStyle | all properties except flexGrow, alignSelf, and margins are applied to the outer TouchableRipple | | mode | equivalent to the [TextInput mode prop](https://callstack.github.io/react-native-paper/text-input.html#mode) | | label | equivalent to the [TextInput label prop](https://callstack.github.io/react-native-paper/text-input.html#label) | | error | equivalent to the [TextInput error prop](https://callstack.github.io/react-native-paper/text-input.html#error) | | selectionColor | equivalent to the [TextInput selectionColor prop](https://callstack.github.io/react-native-paper/text-input.html#selectionColor) | | underlineColor | equivalent to the [TextInput underlineColor prop](https://callstack.github.io/react-native-paper/text-input.html#underlineColor) | | activeUnderlineColor | equivalent to the [TextInput activeUnderlineColor prop](https://callstack.github.io/react-native-paper/text-input.html#activeUnderlineColor) | | outlineColor | equivalent to the [TextInput outlineColor prop](https://callstack.github.io/react-native-paper/text-input.html#outlineColor) | | activeOutlineColor | equivalent to the [TextInput activeOutlineColor prop](https://callstack.github.io/react-native-paper/text-input.html#activeOutlineColor) | | dense | equivalent to the [TextInput dense prop](https://callstack.github.io/react-native-paper/text-input.html#dense) | | iconColor | equivalent to the [TextInput.Icon color prop](https://callstack.github.io/react-native-paper/text-input-icon.html#color) | | iconStyle | equivalent to the [TextInput.Icon style prop](https://callstack.github.io/react-native-paper/text-input-icon.html#style) | Example ------- ``` js 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 ( ); } ``` --- _Source: https://npm.io/package/@hashiprobr/react-native-paper-datetimepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._