Date Time Input

Tips & examples

An interactive date input text box featuring an inline calendar icon button that opens a visual popup date picker menu layer to capture user selections.

When to use

Allowing users to select or enter a specific date, time, or complete timestamp within an interactive form.
Configuring bounded calendar dropdown selectors with explicit past or future validation constraints (Minimum/Maximum dates).

What you need

Disabled by default until a valid default_form component is present on the page layout canvas. Requires pairing via Element ID and Field Path attributes.

Form-bound text or date-schema properties that record standardized ISO timestamp formats or structured time strings.

Examples

A ‘Date of Birth’ form input restricted to past dates with an absolute maximum validation gate.
Scheduling an event window by configuring an interactive calendar field that includes both date and time selection selectors.

Avoid

Using as a simple read-only timestamp display, use the date_time_field output element instead.
Attempting to map or establish data bindings before a parent default_form container element has been placed on the canvas layout page.

Use instead

Date Time Field — The date or time value is purely informational output data and should not be modified by the user.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Input

Default ValueoptionalNot set (null): Initial timestamp loaded into the interactive field structure before explicit user modifications occur.
Default: none
Show Date PartoptionalYes / no: Boolean flag determining whether the calendar selector layer and day properties are tracked within the component.
Default: true
Show Time PartoptionalYes / no: Boolean flag determining whether hourly/minute dials are added to the interface workflow footprint.
Default: true
Format StringoptionalCustom expression (text): Decides whether to parse selections using platform layout templates or explicit custom string variables.
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example true
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example true
Default: none

Configuration

Min DateoptionalCustom expression: Sets the absolute lower boundaries constraint for valid inputs. Configured via calendar date picker selectors or complete code expressions.
Example 2026-07-14T21:00:00.000Z
Default: none
Max DateoptionalCustom expression: Sets the absolute upper boundaries validation constraint for valid inputs. Configured via calendar date picker selectors or complete code expressions.
Example 2026-07-14T21:00:00.000Z
Default: none
TimezoneoptionalCustom expression: Defines explicit timezone translation configurations. Default behavior is initialized to null.
Example null
Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Translatable labels

label — Title label text informing users what temporal constraint data value the calendar field updates.

Accessibility

Implements standard ARIA dialog expectations for date picker panels. Calendar icon elements are explicitly structured as focusable action keys.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myDateTimeInput.<property>

value date Current input value of this control. elements.myDateTimeInput.value

When The picked date as a date value, not text — compare it with another date directly rather than parsing a string. Empty until the user picks one.

disabled boolean True while the control is locked and cannot be edited. elements.myDateTimeInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myDateTimeInput.value

Replace myDateTimeInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false,
    "showDatePart": false,
    "showTimePart": false,
    "minDate": "@@expression:'value'",
    "maxDate": "@@expression:'value'",
    "timezone": "@@expression:'value'",
    "formatString": "@@expression:'value'"
  }
}