Time Picker with bootstrap flavor
- v2 supports React Bootstrap v1.0.0+
- v1 supports React Bootstrap v0.x.x
Demo and playground are available here
npm i react-bootstrap-time-picker --save
import TimePicker from 'react-bootstrap-time-picker';
<TimePicker start="10:00" end="21:00" step={30} />
Note: All props are optional.
Time Picker renders options with range between start
and end
time values with step
(inclusive).
Should be provided in the following format: "HH?(:mm?(:ss?))".
"4", "04", "4:0", "04:00", "4:0:0", "04:00:00". All these are equal to "4 hours".
"11:00 PM". Should be provided in 24-hour format only
Time Format of rendered options. Supported values: 12
or 24
.
Initial selected option. Used if value
prop is either undefined
or null
. Can be provided either in "HH?(:mm?(:ss?))" format or as int (hours * 3600 + minutes * 60 + seconds)
. If initialValue
is less than start
property value, then start
value is used instead.
"1:00", "01:00", "3600", 3600
"11:00 PM"
Function, which is triggered after one of options is selected. Return selected time in int format: (hours * 3600 + minutes * 60 + seconds)
.
class Parent extends React.Component {
constructor() {
super();
this.handleTimeChange = this.handleTimeChange.bind(this);
this.state = { time: 0 };
}
handleTimeChange(time) {
console.log(time); // <- prints "3600" if "01:00" is picked
this.setState({ time });
}
render() {
return <TimePicker onChange={this.handleTimeChange} value={this.state.time} />;
}
}
See end
property description.
Step between time options in minutes. See end
property description.
Current value. See initialValue
description.
Library doesn't validate provided props much. If you are doing something strange like setting start="10:00", end="05:00"
, then behavior is undefined, which means that it might render component differently in the future versions. Also underlying library time-number throws exceptions if provided time is not in a proper format, i.e. adl
is considered invalid.
MIT (c) Yury Dymov