# XlReactWidgetTime

A component for the selection of time.

## Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports
```text
- XlReactWidgetTime
```

### Playground
* [Time Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetTime1)

### Properties
- **className** - (string) - control class name
- **disabled** (boolean) - does not allow user neither to type nor select other value if is set as `true`
- **displayMode** (string) - 3 options are available to choose: 
    _"creation"_ or _"edit"_ - allows to make changes
    _"display"_ - makes component readonly and user can only view the current value
- **invalid** (bool) - if sets as `true` makes component invalid irrelevantly of validators outcome 
- **message** - (object) - overrides default warning/error message provided in validator with provided text here
- **messageHandler** - (function) - will be called to handled error or warning messages. 
Takes a message (string) as a parameter. In case of many error (or warning messages) - first message will be shown.
- **metadata** (object) - set of parameters of the element, namely:
    - **description** (string) - text under the input field, in case of error/warning, will be replaced with error/warning message
    - **label** (string) - text displayed on the left side from the element
    - **placeholder** (string) - Hint shown to the user when input field is empty
- **model** - (object) - controls the current value, should be JavaScript `Date` or moment object. 
Only time part is taken into account, but component updates will happen for any part of the value.
- **name** - (string) - gives HTML name to an element. It's important when component is a part of the form
- **onMessageChange** (function) - triggers once message is changed
- **onModelChange** - (function) - triggers once model is changed
- **onPristinityChange** - (function) - triggers once pristinity is changed
- **onValidityChange** - (func) - triggers once validity is changed
- **register** (func) - triggers when component is mounted. It contains a parameter *api*, which is an object containing 
 helpful component functions which you can invoke to do certain actions, namely
    _blur_ - to make component not focused anymore
    _erase_ - cleaning current value
    _focus_ - makes component focused
    _getSuggestions_ - returns back the list of all provided suggestions
    _resetPristinity_ - changes state of pristinity back to true
    _revealSuggestions_ - opens the list of suggestions 
- **showParentMessages** - (boolean) - if set to `true` ignores own messages, but takes it from parent component
It is useful once you start composing components and autocomplete component only a part of it
- **validators** (func) - that's a function which returns back an array of triggers. Validators are 
 called on every change of model. The result of the validators is to show if the component valid or not and providing a 
 message to the user (error or warning). In case of many messages there is a priority rule. First shows error message, if all of them are solved - then warnings.
 In case of many error (or warning messages) - first message will be shown.  

### Example
```jsx
const widgetModel = moment("2013-12-24 14:30");

<XlReactWidgetTime
    model={widgetModel}
/>
```
