Datepicker

The datepicker (Calendar Picker) is a lightweight component that allows end users to enter or select a date value.

The default datepicker value is DD.MM.YYYY.

Configuring the datepicker element

Datepicker generic settings

The available configuration options for this form element are:

Process data key

Process data key establishes the binding between the datepicker element and process data, enabling its later use in decisions, business rules or integrations.

Properties

Label: The visible label for the datepicker element.
Placeholder: Text that appears within the datepicker element when it is empty.
Min Date: Set the minimum valid date selectable in the datepicker.
Max Date: Set the maximum valid date selectable in the datepicker.
Min Date, Max Date error: When a date is introduced by typing, define the error message to be displayed.
Helpertext: Additional information about the datepicker element, which can be optionally hidden within an infopoint.

Datasource configuration

Default Value: The default values of the datepicker element, this will autofill the datepicker when you will run the process.

Validators

The following validators can be added to a datepicker: required, custom, isSameOrBeforeToday or isSameOrAfterToday (more details here).

Hide/disable expressions

The datepicker behavior can be defined using JavaScript expressions for hiding or disabling the element. The following properties can be configured for expressions:

Hide condition: A JavaScript expression that hides the datepicker element when it returns a truthy value.
Disabled condition: A JavaScript expression that disables the datepicker element when it returns a truthy value.

It’s important to make sure that disabled fields have the same expression configured under the path expressions → hide.

UI actions

UI actions can be added to the datepicker element to define its behavior and interactions.

Event: Possible value - CHANGE.
Action Type: Select the action type.

For more details on how to configure a UI action, click here.

Datepicker settings overrides

There are instances where you may need to tailor settings configured in the Generic settings tab. This proves especially beneficial when you wish to adjust these settings to appear differently across various platforms such as Web, Android, or iOS.

Available override settings:

Properties:
- Label: Override the datepicker label.
- Helper: Override helper text/info point.
Expressions:
- Hide: Override the hide expression.

Overrides can always be imported/pushed from one platform to another:

Datepicker styling

Sizing

Adjusting the size of components is crucial for a responsive design. Fit W (width) offers three options:

fill: Fills the available space.
fixed: Maintains a fixed width.
auto: Adjusts the width automatically based on content.

Datepicker style overrides options

Theme overrides refer to the ability to modify or customize the appearance and behavior of UI components by overriding default theme settings. This can be applied at various levels, such as specific elements or entire sections, and can be platform-specific (Web, iOS, Android).