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.
Properties
Time Input
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
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
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.
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.).
Last updated
Was this helpful?