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

Development

• npm install
• npm start
• http://localhost:8081

License

ISC