react-toolbox/components/time_picker/readme.md

27 lines
1.1 KiB
Markdown
Raw Normal View History

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
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 = () => (
<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`.|
| `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 |