Time Input
Time Input Overview
A Time Input component is helpful when you want the user of your app to easily select a specific time using the native Android or iOS date picker
Properties
Time Input
| Property | Description | Data Type |
|---|---|---|
Style | Format to use when displaying selected date | Select from menu |
Font Size | Size of font when displaying date | 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/container | Select from list |
Style
Property | Description | Data Type |
Visible | Toggle whether your end users can see the Time Input | True/False |
Border Style | Set whether border style is solid, dotted or dashed (only visible if border width > 0) | Select from list |
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 |
Save the time
The time that a user selects will show up automatically in the Time Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.
Event Property | Output |
Get Time | Date in whichever format you specify |
Get Hours | Hour of the Day from |
Get Minutes | Minutes from |
Blocks
Events
Time Picked
Fires when the user has selected a time with the Time Input
Functions
Launch Picker
Launches the Time Input picker for the user to select a time.
Get Hour
Returns the hour of the currently selected time in 24 hour format.
Example: if the user selects 2:30 PM, this block will return 14.
Get Minute
Returns the minute of the currently selected time.
Example: if the user selects 2:30 PM, this block will return 30.
Get Time
Returns the selected time in the same format as the Style property of the Time Input.
Example: if the user selects 2:30 PM, and the Style is set to Hour:Minute AM/PM, this block will return 2:30 PM.
If the user selects 2:30 PM, and the Style is set to Hour:Minute 24h, this block will return 14:30.
Properties
Set and get properties of the Time Input
Style
Computed Height and Width
Returns the height/width of the Time Input on the device screen in pixels.
Visible
Font Size
Color
Background Color
Set the background color of the Time Input as it is displayed in the project.
Font Style
Font Weight
Text Align
Set the Text Alignment of the Time Input to Auto, Left, Right, Center or Justify.
Last updated
