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-09-04 22:57:11 +03:00
2015-10-31 22:12:45 +03:00
let selectedTime = new Date();
selectedTime.setHours(17);
selectedTime.setMinutes(28);
const TimePickerTest = () => (
2015-11-21 16:46:24 +03:00
< TimePicker label = 'Finishing time' value = {selectedTime} / >
2015-10-31 22:12:45 +03:00
);
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 |