Date Picker

A data picker allows users to select a specific date from a dropdown calendar.

Properties

Form item name: This is the name that the encompassing form will use to access the output of the date picker. See Custom Form for how it's used.

Type: Choose the date type the user will be selecting. This includes year, month, date, week, and more.

Default value: The default value to output if the user does not select a date.

Max and Min Date: Select the date range users will be able to choose within.

Readonly: When toggled on, users will not be able to select a date.

Disabled: When toggled on, users will not be able to select a date.

Date Format: Format of the selected date.

Value Format: Format that the date will have in the output.

Range Separator: Separator character for date ranges.

Clearable: When on, users will be able to clear their selection.

Placeholder: Placeholder value to display. The element will not take on this value, as opposed to the default value.

Size: Choose the size of this element.

See Form Check for data validation.

See Tooltip for tooltip configurations.

Output

The output format is set by Value format under Property.

Supported Events

Change Date: Triggered when a user selects a value.

Focus: Triggered when a user selects the Date Picker.

Blur: Triggered when a user deselects the Date Picker.

Visible Change: Triggered when the Date Picker's dropdown appears/disappears.

Supported Actions

Set Value: Set the output value.

Set Validate Result: Set whether the input is valid.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.