react-datetime-inputs

React component for datetime input

This component is designed to provide easy and intuitive input of moment.js datetime objects.

Desgined to be as simple as possible in order to afford intuitive interactions.

Demo

Click here for a live demo.

Datetime input

Install

1. Install 'react-datetime-inputs' with npm

npm install react-datetime-inputs --save

or with yarn

yarn add react-datetime-inputs

1. Import DatetimeInput component

import { DatetimeInput } from 'react-datetime-inputs'

1. Render DatetimeInput component

render() {
  return (
    <DatetimeInput
      datetime={this.state.datetime}
      onChange={this.handleOnChange.bind(this)}>
    </DatetimeInput>
  )
}

Attributes

Property	Usage	Default	Required
datetime	moment.js datetime object or a datetime string	none	no
date-format	moment.js compatible date format used for display in date and datetime input directives	'DD MMMM YYYY'	no
time-format	moment.js compatible time format used for display in time and datetime input directives	'HH : mm : ss'	no
minDate	moment.js datetime object min datetime	none	no
maxDate	moment.js datetime object max datetime	none	no
placeholder	Placeholder is shown when input object is undefined	none	no
allowClear	Allow users to clear selected datetime value	false	no
clearText	Clear text shown in the button to clear date object	Clear	no
onChange	Handler function that is fired on change of datetime object	none	no
onClose	Handler function that is fired on close of the edit popover	none	no
customDisplay	custom display component for presentation	none	no
naturalScroll	scroll direction	true	no

Note that when custom display component is used you need to format display value and include a button to toggle datetime editor/popover. Additionally one can use active and warning properties to change display (or alert user of invalid input when used together with minDate and/or maxDate properties).

For example:

<h1 onClick={this.props.onClick}>
  {this.props.datetime.format('DD MMM HH:mm')}
</h1>

Angular directives

If you are looking for datetime input widgets as angular directices, check out angular-datetime-inputs and angular-datetime-range

Dependencies

• react.js
• moment.js