Basic Components: Date Input

A form component that allows users to select a specific calendar date from an overlay menu.

Date Input is a form component that allows users to select a specific calendar date from an overlay menu.

Date Inputs are commonly used for scheduling, deadlines, and birthdays.

All Form Components should be placed within a Data Zone component set to the Form Data Source.

All Form Components share the following properties in the Settings Panel:

ID: Specifies how the data will be named when accessed through its Data Zone. Data for an input will not be accessible until you provide an ID.
Error: Use this to indicate that a field has an error state. Field errors can be retrieved by referencing the parent Data Zone and inspecting the error property for each field.

Min Date: Specifies the earliest date a user can select. Click the field to open a date picker. You can check "use current date" to dynamically set the minimum date to today.
Max Date: Specifies the latest date a user can select. Click the field to open a date picker. You can check "use current date" to dynamically set the maximum date to today.
Blur On Submit: When enabled, the field will blur (lose focus) when the form is submitted.
Default Value: The value that is displayed when the input is first rendered.
Readonly: If enabled, the user cannot edit the input's contents.

Display: Controls the layout behavior of the component itself. Options include Block (default) and None (hides the component).
Elevation: A numeric value that controls the shadow depth on Android and provides a similar shadow effect on iOS and Web. A higher value gives the component a greater sense of depth.

Date Input is an input component that supports both the Standard Event Set and Input and Focus Events:

On Blur: Triggers when the field loses focus.
On Change Text: Triggers when the text content changes.
On Destroy: Triggers when the component is removed from the layout.
On Focus: Triggers when the field receives focus.
On Hover In: Triggers when a cursor hovers over the component.
On Hover Out: Triggers when a cursor leaves the component.
On Initialize: Triggers when the component is first rendered.
On Inputs Change: Triggers when any input data changes in the component's context.
On Long Press: Triggers when the user presses and holds the component.
On Press: Triggers when the user taps or clicks the component.
On Press In: Triggers when the user begins pressing the component.
On Press Out: Triggers when the user releases the press.
On Submit: Triggers when the form is submitted.

Did this answer your question?