# react-moment-input

> react-moment-input

Latest version **0.2.31** (published 2021-01-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-moment-input
pnpm add react-moment-input
yarn add react-moment-input
bun add react-moment-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.2.31 |
| Published | 2021-01-06 |
| First published | 2017-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kenan Berbic |
| Maintainers | tkaldzija, kberbic, alminahaskic, mbulbulusic |
| Keywords | react, react-component, input, datetime, picker, moment, datapicker |

## Links

- npm: https://www.npmjs.com/package/react-moment-input
- Repository: https://git@bitbucket.org/kenanberbic/react-moment-input
- Homepage: https://kenanberbic.bitbucket.io/react-moment-input
- npm.io page: https://npm.io/package/react-moment-input

## Dependencies (6)

- [ionicons](https://npm.io/package/ionicons.md) ^3.0.0
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.25
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^2.0.4
- [input-material-ui](https://npm.io/package/input-material-ui.md) ^1.3.0
- [react-input-slider](https://npm.io/package/react-input-slider.md) ^5.0.8

## 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.2.31 (latest) — 2021-01-06
- 0.2.30 — 2019-06-07
- 0.2.29 — 2019-05-03
- 0.2.28 — 2019-04-30
- 0.2.27 — 2019-04-30
- 0.2.26 — 2019-04-30
- 0.2.25 — 2019-04-30
- 0.2.24 — 2019-04-26
- 0.2.23 — 2019-04-25
- 0.2.22 — 2019-04-25
- 0.2.21 — 2019-04-17
- 0.2.20 — 2019-04-16
- 0.2.19 — 2019-04-10
- 0.2.18 — 2019-04-02
- 0.2.17 — 2019-04-02
- … 27 more at https://npm.io/package/react-moment-input/versions

## README

# react-moment-input
[![npm](https://img.shields.io/npm/v/react-moment-input.svg)](https://www.npmjs.com/package/react-moment-input)
[ ![Codeship Status for kenanberbic/react-moment-input](https://app.codeship.com/projects/defd3130-8d08-0135-56c7-72b04f178433/status?branch=master)](https://app.codeship.com/projects/249635)
[![Known Vulnerabilities](https://snyk.io/test/npm/react-moment-input/badge.svg)](https://snyk.io/test/npm/react-moment-input)

React datetime picker powered by [momentjs](http://momentjs.com)

The design is from http://wangzuo.github.io/input-moment/.

The icon is from [ionicons](http://ionicons.com/).

Demo: [react-moment-input](https://kenanberbic.bitbucket.io/react-moment-input/).

Source: [react-moment-input](https://git@bitbucket.org/kenanberbic/react-moment-input).

Issue tracker: [react-moment-input](https://bitbucket.org/kenanberbic/react-moment-input/issues)

Support:

* Date time picker
* Translations
* Different date formats, support for AM/PM YYYY-MM-DD hh:mm AA
* Tab selection
* Month selection
* Current day
* Days of week order
* Min and max date
* Icon support
* Custom style

### Installation
``` sh
npm i react-moment-input --save
```

### Usage
``` javascript

import MomentInput from 'react-moment-input';

<MomentInput
              max={moment().add(5,'days')}
              min={moment()}
              format="YYYY-MM-DD HH:mm"
              options={true}
              readOnly={false}
              icon={false}
              onChange={(date)=> {console.log(date)}} />
```

### Usage Available properties

| Property | Type | Content  | Default Value |
| --- | --- | --- | --- |
| min | `moment` | Min selected date | `undefined`
| max | `moment` | Max selected date | `undefined`
| value | `moment` | The current value | `undefined`
| defaultValue | `moment` | The current value, only apply on component mount | `undefined`
| format | `string` | Date time format | `YYYY-MM-DD HH:mm`
| tab | `Number` | Selected tab: 0-Calendar, 1-Time, 2-Year  | `0`
| options | `boolean` | Show header options  | `true`
| position | `string` | Picker positions : 'bottom' or 'right'  | `bottom`
| readOnly | `boolean` | Disable input  | `true`
| monthSelect | `boolean` | Disable month select control  | `false`
| today | `boolean` | Today button  | `false`
| isOpen | `boolean` | Show picker  | `false`
| showIcon | `boolean` | Show calendar icon  | `false`
| daysOfWeek | `array` | Days order in a week  | `['Sun','Mon','Tue', '...']`
| translations | `JSON` | {DATE:"Date", TIMES:"Times", DAYS_MON:"Mon", MONTHS_OCTOBER:"October"}  | `{}`
| style | `JSON` | Container style  | `undefined`
| className | `string` | Container class  | `r-input-group`
| inputStyle | `JSON` | Input style  | `undefined`
| inputClassName | `string` | Input class | `r-input`
| onChange | `function` | Emit value on every click (value, name) | `undefined`
| onSave | `function` | Emit value on save click (value, name)  | `undefined`
| onClose | `function` | Emit value on picker close (value, name)  | `undefined`
| enableInputClick | `boolean` | Show picker  | `undefined`
| iconRendered | `function` | Renders custom component as icon | `undefined`
| autoClose | `boolean` | Close picker on value change  | `undefined`

### Development
- npm install
- npm start
- http://localhost:8081

### License
ISC

---
_Source: https://npm.io/package/react-moment-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._