react-datetime-inputs v0.0.6
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 --saveor with yarn
yarn add react-datetime-inputs2) Import DatetimeInput component
import { DatetimeInput } from 'react-datetime-inputs'3) 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