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
| Name | Type | Default | Description|
2015-11-01 17:54:17 +03:00
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Sets a class to give customized styles.|
| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm` .|
2015-11-21 16:46:24 +03:00
| `label` | `String` | | The text string to use for the floating label element in the input component.|
2015-11-10 17:27:03 +03:00
| `onChange` | `Function` | | Callback called when the picker value is changed.|
2015-11-01 17:54:17 +03:00
| `value` | `Date` | | Datetime object with currrently selected time |