> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/time-picker.md).

# 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.

![](/files/nqPTV8Ba5U1OsZgKejx5)

## 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;

![](/files/abB7xoCbYANB1dHrdffY)

### 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;

![](/files/oNUeUwbhS1Jr0DWk9Gdw)

### 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;

![](/files/qJPKn7NZiq1mscKCIv6m)

### 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;

![](/files/7RV21OZaaktLE77feYPi)

## 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

![](/files/Hrm3yBNR3qKnHonYRgfH)

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

![](/files/zQDWJWYhvKPFn15473QM)