react-toolbox-build4server
Version:
Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project
36 lines (28 loc) • 1.56 kB
Markdown
# Time Picker
A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
<!-- example -->
```jsx
import TimePicker from 'react-toolbox/lib/time_picker';
let time = new Date();
time.setHours(17);
time.setMinutes(28);
class TimePickerTest extends React.Component {
state = {time};
handleChange = (time) => {
this.setState({time});
};
render () {
return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
}
}
```
## Properties
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
| `error` | `String` | | Provide error text which will be displayed under the field.|
| `inputClassName`| `String` | | This class will be applied to `Input` component of `TimePicker`. |
| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
| `value` | `Date` | | Datetime object with currrently selected time. |