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