Date picker

Last update: Download PDF Edit

A date picker is an input widget that can be used to display and edit date/time attributes. It takes into account the language setting to display a localized calendar.

General properties

Date format

The date format determines whether the date picker displays the date, time, date and time, or a custom variation of the linked attribute. This does not affect how data is stored; in all cases both a date and a time will be recorded. It merely affects how the data is displayed. How the date and/or time are formatted depend on the localization of the user viewing the data.

Possible values: ‘Date’, ‘Time’, ‘Date and time’ and ‘Custom’.

Default value: Date

Custom date format

If you choose ‘Custom’ as the date format (see above) this property determines how the attribute value is formatted. The custom date format is a string that allows for any combination of symbols found in the table below. Any punctuation will be rendered literally.

w1..227Week of year
d1..212Day of month
D1..393Day of year
a1AMAM or PM
h1..211Hour (1-12)
H1..213Hour (0-23)
k1..210Hour (1-24)
K1..20Hour (0-11)
m1..259Minute, use one or two for zero padding
s1..212Second, use one or two for zero padding
E1..3ThuDay of week
E4ThursdayDay of week
z1..3PSTTime zone
z4Pacific Standard TimeTime zone
Z4GMT-04:0 0Time zone offset
FormatExample output
EEEE d MMMM yyy G, h:mm a ss'sTuesday 29 March 2011 AD, 1:37 PM 48s
h:mm a1:37 PM
yyy D KK:mm2011 88 01:26
EEEE MMMM d yyyTuesday March 29 2011
EEE, MMM d, ''yyWed, Jul 4, '01

Placeholder Text

The placeholder text is shown if the date attribute is empty. It can be used to give the end user a hint as to the expected format. Note: placeholder texts will not work if a native date picker is available (e.g. iOS and Android versions 4.0 and higher).


This property indicates whether this widget must be filled in by the end user or not. If set to true, this widget can not be left empty and a message will be shown if the end user presses the ‘Save’ button.

Default value: False

Required message

This property determines the message that is shown to the end user if the widget is empty and the ‘Required’ property is set to true. This is a translable text. See Translatable Texts.

Data source properties

Attribute (path)

Many input widgets, like text boxes and drop-down widgets, can be connected to:

  1. an attribute of the entity of the data view that contains the widget
  2. an attribute of an entity associated with the data view entity by following one or more associations of type reference through the domain model.

In the first case we say the widget is connected to an attribute and in the second case to an attribute path.

Label properties

A label can be used to described the purpose of the widget to the user. The label is shown next to the widget in the user interface. If a label is configured, the widget will be rendered in the browser wrapped in a form group. See Bootstrap documentation.

Show label

This property determines whether the label is rendered and the widget is wrapped in a form group.

Default value: No

Label caption

This property is shown only when Show label is Yes. This property determines what text is rendered within a label.

Editability properties


The editable property indicates whether the end user will be able to change the value displayed by the widget.

DefaultThe value is editable if security allows it (i.e. if the user that is signed in has write rights to the selected attribute).
The value is never editable.
The value is editable if security allows it and the specified condition holds. (see below)

Default value: Default


A widget can be made editable based on the value of an attribute of the enclosing data view. The attribute must be of type boolean or enumeration. For each value, you specify whether the widget is editable. Upon entering the page and upon changing the condition attribute the edit state of the widget will be updated.

Example: you don’t have to ask for the marriage date if the end user indicates that he or she is not married.

Visibility properties


By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met. 

Attribute Condition


When checked, this setting hides the widget unless a particular attribute has a certain value. Only boolean and enumeration attributes can be assigned to this purpose.

A practical example would be a web shop in which the user must submit both billing and delivery information. In this case you might not wish to bother the user with a second set of address input fields unless he or she indicates that the billing and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the boolean attribute SameBillingAndDeliveryAddress.

Module roles

The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles. Please note that this does not override project security. Any restrictions due to microflow, form, or entity access will remain in effect.

Events properties

On change

The on-change property optionally specifies a microflow that will be executed when leaving the widget after the value has been changed.

On change settings

The on change settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

On enter

The on-enter property optionally specifies a microflow that will be executed when the widget is entered, either by using the tab key or by clicking it with the mouse.

On enter settings

The on enter settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

On leave

The on-leave property optionally specifies a microflow that will be executed when leaving the widget, either by using the tab key or by clicking another widget.

On leave settings

The on leave settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

Common properties


The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.


The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.


The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

Tab index

The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.

Default value: 0