React-moment-input NPM

react-moment-input

React datetime picker powered by momentjs

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

The icon is from ionicons.

Demo: react-moment-input.

Source: react-moment-input.

Issue tracker: react-moment-input

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

npm i react-moment-input --save

Usage

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`