Time Input Component
Last updated
Last updated
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.
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
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]
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
You can trigger actions to happen when an event occurs.
This event fires when the user has selected a time using the time picker.
Opens the time picker to prompt the user to enter a time.
Returns the hour from the time picker in 24-hour format. For example, if the user selects 2:30 PM, this block returns 14.
Returns the minutes from the time picker in. For example, if the user selects 2:30 PM, this block returns 30.
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.
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
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.).
