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.
Click here for a live demo.
- Install 'react-datetime-inputs' with npm
npm install react-datetime-inputs --save
or with yarn
yarn add react-datetime-inputs
- Import DatetimeInput component
import { DatetimeInput } from 'react-datetime-inputs'
- Render DatetimeInput component
render() {
return (
<DatetimeInput
datetime={this.state.datetime}
onChange={this.handleOnChange.bind(this)}>
</DatetimeInput>
)
}
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>
If you are looking for datetime input widgets as angular directices, check out angular-datetime-inputs and angular-datetime-range