Time Input Component

Overview

The time input component allows users to easily select times. Users can pick times for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering times, reducing errors and ensuring accuracy. The time input component utilizes the native Android and iOS time pickers.

Native Android time picker on the left and iOS on the right.

Properties

Time Input

Property	Description	Data Type
Style	Format to use when displaying selected time	Select from menu [Hour:Minute AM/PM, Hour:Minute 24h]
Font Size	Size of font when displaying time	Number
Font Style	Select whether font is italic	True/False
Font Weight	Select whether font is bold	True/False
Color	Color of font when displaying time	Color

Layout

Property	Description	Data Type
X	Location of top left corner of time input on X-axis, where the left hand side is X=0	Number
Y	Location of top left corner of time input on Y-axis, where the top side is Y=0	Number
Height	Height of time input in pixels	Number
Width	Width of time input in pixels	Number
Resize Mode	Define dimensions of the time input component.	Select from list [Stretch, Float in Place]

Style

Property	Description	Data Type
Visible	Toggle whether your end users can see the time input component	True/False
Border Style	Set whether border style is solid, dotted or dashed (only visible if border width > 0)	Select from list [solid, dotted, dashed]
Border Color	Color of border (only visible if border width > 0)	Color
Border Width	Width of border around time input in pixels	Number
Border Radius	Radius of corners of border on time input in degrees	Number
Shadow Color	Color of time input's shadow	Color
Shadow Opacity	Opacity of Time Input's shadow	Number between 0 and 100
Shadow Radius	Radius of corners of time input's shadow in pixels	Number
Shadow Offset	How far time input's shadow should be offset, in height and width, in pixels	Number

Time Input Blocks

Event Blocks

You can trigger actions to happen when an event occurs.

When Time Input Time Picked

This event fires when the user has selected a time using the time picker.

Function Blocks

Call Time Input's Launch Picker

Opens the time picker to prompt the user to enter a time.

Call Time Input's Get Hour

Returns the hour from the time picker in 24-hour format. For example, if the user selects 2:30 PM, this block returns 14.

Call Time Input's Get Minute

Returns the minutes from the time picker in. For example, if the user selects 2:30 PM, this block returns 30.

Call Time Input's Get Time

Returns the selected time from the time picker in the same format as the time input's style property. For example, if the user selects 2:30 PM, and the style is set to Hour:Minute AM/PM, this block returns 2:30 PM. If the user selects 2:30 PM, and the style is set to Hour:Minute 24h, this block returns 14:30.

Save the Time

The time the user selects automatically displays in the time input label, but if you want to save the time to be used later, you can use the block combination below to save the time as a variable.

Event Property	Output
Get Time	Time in whichever format you specify
Get Hours	Hour of the Day from 1-24
Get Minutes	Minutes from 1-60

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).