Datepicker

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

​

Configuring the datepicker element

​

Datepicker generic settings

The available configuration options for this form element are:

• Process data key
• Properties
• Datasource
• Validators
• Expressions
• UI actions
• Datepicker styling

​

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.

​

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.

​

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.

​

Datepicker styling

​

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). Style options: