# @super-formal/rn-date-time-input

> DateTime Input component for react-native.

Latest version **0.1.1** (published 2020-09-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @super-formal/rn-date-time-input
pnpm add @super-formal/rn-date-time-input
yarn add @super-formal/rn-date-time-input
bun add @super-formal/rn-date-time-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-09-21 |
| First published | 2020-09-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 155.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hashem Berzeg |
| Maintainers | berzeg |
| Keywords | super-formal, react-native, datetime, time, date, datetime input, time input, date input, component |

## Links

- npm: https://www.npmjs.com/package/@super-formal/rn-date-time-input
- Repository: https://github.com/Berzeg/super-formal-rn-date-time-input
- Homepage: https://github.com/Berzeg/super-formal-rn-date-time-input#readme
- Issues: https://github.com/Berzeg/super-formal-rn-date-time-input/issues
- npm.io page: https://npm.io/package/@super-formal/rn-date-time-input

## Dependencies (1)

- [moment](https://npm.io/package/moment.md) ^2.27.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2020-09-21
- 0.1.0 — 2020-09-21

## README

# @super-formal/rn-date-time-input

DateTime input component for react-native.

<p align="center">
  <img src="img/demonstration.png" width="50%"/>
</p>

## Index

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [The `DateTimeInput` Component](#the-date-time-input-component)
  - [`style` prop](#dateTimeInput-style)
  - [`label` prop](#dateTimeInput-label)
  - [`value` prop](#dateTimeInput-value)
  - [`hasError` prop](#dateTimeInput-hasError)
  - [`onActive` prop](#dateTimeInput-onActive)
  - [`onChange` prop](#dateTimeInput-onChange)

## Installation

Using npm:

```
npm i --save @super-formal/rn-date-time-input
```

Using yarn:

```
yarn add @super-formal/rn-date-time-input
```

## Basic Usage

After installing the package you can use it in your React components as follows:

```
import DateTimeInput from '@super-formal/rn-date-time-input';

const [arrivalTime, setArrivalTime] = useState(Date.now());

// inside your render() function
<DateTimeInput
  label="Arrival Time"
  value={arrivalTime}
  onChange={val => setArrivalTime(val)}
/>
```

## The `DateTimeInput` Component

### <a id="dateTimeInput-style"></a> `style` prop

`{Object<propName: String, propValue: any>}` - optional - At the moment, the only customizable style property is `marginBottom`.

### <a id="dateTimeInput-label"></a> `label` prop

`{String}` - optional - The label that describes what the datetime value signifies. Defaults to `""`.

### <a id="dateTimeInput-value"></a> `value` prop

`{Integer}` - required - The unix timestamp (in milliseconds) of the currently selected datetime value.

### <a id="dateTimeInput-hasError"></a> `hasError` prop

`{Boolean}` - optional - Whether the date time input is in an error state or not. Defaults to `false`.

### <a id="dateTimeInput-onActive"></a> `onActive` prop

`{Function<>}` - optional - A callback that is called when the input is selected (before showing the datetime selector modal).

### <a id="dateTimeInput-onChange"></a> `onChange` prop

`{Function<Integer>}` - required - A callback that is called when the selected value is changed. It has the signature `(Integer newValue) => {...}`, where the `newValue` is the new unix timestamp (in milliseconds) for the newly selected datetime value.

---
_Source: https://npm.io/package/@super-formal/rn-date-time-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._