2015-11-01 17:54:17 +03:00
# Time Picker
2015-09-04 22:57:11 +03:00
2015-10-31 22:12:45 +03:00
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.
2015-09-04 22:57:11 +03:00
2015-10-31 22:12:45 +03:00
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import TimePicker from 'react-toolbox/lib/time_picker';
2015-12-03 02:56:18 +03:00
let time = new Date();
time.setHours(17);
time.setMinutes(28);
2015-09-04 22:57:11 +03:00
2015-12-03 02:56:18 +03:00
class TimePickerTest extends React.Component {
state = {time};
2015-10-31 22:12:45 +03:00
2015-12-03 02:56:18 +03:00
handleChange = (time) => {
this.setState({time});
};
render () {
return < TimePicker label = 'Finishing time' onChange = {this.handleChange} value = {this.state.time} / > ;
}
}
2015-09-04 22:57:11 +03:00
```
## Properties
2016-03-27 01:28:20 +03:00
| Name | Type | Default | Description|
2015-11-01 17:54:17 +03:00
|:-----|:-----|:-----|:-----|
2016-03-27 01:28:20 +03:00
| `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.|
2016-04-10 19:53:44 +03:00
| `inputClassName` | `String` | | This class will be applied to `Input` component of `TimePicker` . |
2016-03-27 01:28:20 +03:00
| `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. |