# Time picker

## Look\&Feel Settings

**Label** (not mandatory) to be used to show the component's label.

**Placeholder** (not mandatory) to be used to show the component's placeholder.

**Name** (mandatory) - name of the component.

**Tooltip** (not mandatory) - tooltip string.

**Min** (mandatory) - minimum timestamp value \[*unix formatted*] to start from. Is set to 0 by default. 

**Max** (mandatory) - maximum timestamp value \[*unix formatted*] which can be selected. Equivavalent to the moment of creation by default. 

**Step** (not mandatory) - selection step value.

**Required** (mandatory) - marks if the selection required or not. Is set to false by default.

**Allow clear** (mandatory) - allows clear on selection. Is set to false by default. 

**Disabled** (mandatory) - makes the component disabled if turned on. Is turned off by default.

**Visible** (mandatory) - makes the component visible if turned on. Enabled by default.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FVR4fUelHY9pE0rSGf2YA%2Flook_n_feel.jpg?alt=media\&token=4d1f3640-5073-4432-9d01-998913b7cb0f)

## Workflow triggers

* **onChange** - fires when the dropdown option is changed.
* **onFocus** - fires when the Select component is being focused on.
* **onBlur** - fires when the Select component is blurred.
* **onCreate -** fires when the component is created.
* **onShow** - fires when the component is shown.
* **onHide** - fires when the component is hidden.
* **onDestroy** - fires when the component is shown.
* **onEnterKey** - fires when the Enter key is pressed.

## Component Actions

### Timepicker Get Properties

Gets the component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;

**Output** parameters:

* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Min** \[*datetime*] - minimum timestamp value \[*unix formatted*] to start from;
* **Max** \[*datetime*] - maximum timestamp value \[*unix formatted*] which can be selected;
* **Value** \[*datetime*] - selected timestamp value \[*unix formatted*];
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FrqIwCjFRCqWJh7zjsghR%2Ftimepicker_get_properties.jpg?alt=media\&token=8c4b28d5-2b91-491f-8049-07b54bd864c2)

### Timepicker Set Properties

Sets the component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Min** \[*datetime*] - minimum timestamp value \[*unix formatted*] to start from;
* **Max** \[*datetime*] - maximum timestamp value \[*unix formatted*] which can be selected;
* **Value** \[*datetime*] - selected timestamp value \[*unix formatted*];
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FHYopvX3d4wynNfebGxSq%2Ftimepicker_set_properties.jpg?alt=media\&token=50328356-8c07-415f-9598-ea1ca8b488b6)

### Timepicker Update Properties

Updates component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Min** \[*datetime*] - minimum timestamp value \[*unix formatted*] to start from;
* **Max** \[*datetime*] - maximum timestamp value \[*unix formatted*] which can be selected;
* **Value** \[*datetime*] - selected timestamp value \[*unix formatted*];
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FxFUTIKF1D6L0kB4P45jF%2Ftimepicker_update_properties.jpg?alt=media\&token=770cf5ac-0baf-4372-8895-89291f9103ed)

### Timepicker Validate

Validates the selected timestamp value from the DateTime Picker component.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;

**Output** parameters:

* **Success** \[*boolean*] - validation result;
* **Error** \[*string*] - error message;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FcRSesuafFye9W0PXBRn2%2Ftimepicker_validate.jpg?alt=media\&token=0e3bcc83-5b22-4154-bd44-96cd34fad088)

## Usage example

To parse the selected time and gets all its composites, the following logic should be used 

* Drag the **Timepicker Get Properties** block and drop it into the canvas. **Component ID** has to be specified in order to get the value from the **Time Picker** component

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FFBFojPmkneRUtHWk876p%2Fexample_1.jpg?alt=media\&token=da6702e5-46e1-44e8-a362-c292e4d1b026)

* The selected value can be divided into some minor parts, like seconds, minutes etc. **Expand time** has to be used. 

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F81KOZMin6HPlHylACbQI%2Fexample_2.jpg?alt=media\&token=392f11f3-55c1-44bf-b71a-33b811875b3f)