Date Input Component

Overview

The date input component allows users to easily select dates. It's like a digital calendar where users can pick dates for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering dates, reducing errors and ensuring accuracy. The date input component utilizes the native Android and iOS date pickers.

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

Properties

Date Input

Property	Description	Data Type
Style	Format to use when displaying selected date	Select from menu [YYYY-MM-DD, MM/DD/YYYY, M/D/YY, Month Day, Year, Mth. Day, Year]
Font Size	Size of font when displaying date	Number
Font Style	Make the date's text italicized	True/False
Font Weight	Make the date's text bold	True/False
Color	Color of font when displaying date	Color

Layout

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

Style

Property	Description	Data Type
Visible	Toggle whether your end users can see the date input	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 date input in pixels	Number
Border Radius	Radius of corners of border on date input in degrees	Number
Shadow Color	Color of date input's shadow	Color
Shadow Opacity	Opacity of date input's shadow	Number between 0 and 100
Shadow Radius	Radius of corners of date input's shadow in pixels	Number
Shadow Offset	How far date input's shadow should be offset, in height and width, in pixels	Number

Date Input Blocks

Event Blocks

You can trigger actions to happen when an event occurs.

When Date Input Date Picked

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

Function Blocks

Call Date Input's Get Date

Returns the date from the date picker in the format Mon., DD, YYYY.

Call Date Input's Get Day

Returns the date from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 17. If they select 5 March 2025, this block returns 5.

Call Date Input's Get Month

Returns the month from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 2. If they select 5 March 2025, this block returns 3.

Call Date Input's Get Year

Returns the year from the date picker in YYYY form.

Call Date Input's Launch Picker

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

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 group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group'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.).