A date picker is used to display and, optionally, allow the end-user to edit the value of an attribute of data type Date and Time. It uses the values set in the Languages tab of Project Settings to display a correctly localized value to the end-user, using the Language entity associated with the end-user.
A date picker must be placed in a data widget and displays an attribute of the object(s) retrieved by that widget. The name of the attribute to be displayed is shown inside the date picker, between square brackets, and colored blue.
For example, the following text box allows the end-user to see, and set, the LastContacted date of a customer.
An example of date picker properties is represented in the image below:
Date picker properties consist of the following sections:
2.1 Common SectionFor more information on properties of this section, see the Common Section section in Properties Common for Widgets.
2.2 Data Source Section
Many input widgets (like text boxes and drop-down widgets) can be connected to the following:
- An attribute of the entity of the data view that contains the widget; in this case, the widget is connected to an attribute
- An attribute of an entity associated with the data view entity by following one or more associations of the reference type through the domain model; in this case, the widget is connected to an attribute path
In the first case, we say the widget is connected to an attribute, and in the second case it is connected to an attribute path.
In Mendix 8.1 and above, you can edit attributes presented in input widgets over a path.
2.3 Design Properties Section
2.4 Editability Section
Editability determines whether an end-user can change the value in an input widget.
For more information on properties of this section, see the Editability Section section of Properties Common for Widgets.
2.5 Events Section
2.5.1 On Change
The on-change property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget, after the value has been changed.For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.
2.5.2 On Enter
The on-enter property specifies an action that will be executed when the widget is entered, either by using the Tab key or by clicking it with the mouse.For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.
2.5.3 On Leave
The on-leave property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget.
This differs from the On change property in that the event will always be triggered, even if the value has not been changed.For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.
2.6 General Section
2.6.1 Date Format
The date format determines whether the date picker displays the attribute values as a date, time, date and time, or in a custom format.
The format chosen here 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. The date and/or time formats also depend on the localization (language) of the end-user viewing the data.
The possible values for date format are shown below:
- Date (this is the default)
- Date and time
- Custom (see below for more details)
2.6.2 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.
All examples are for 30th December 2014, at 00:27:16.789
|y, yyy, yyyy, etc.||2014||Year|
|Y, YYY, YYYY, etc.||2015||Week year, use in combination with
|YY||15||Week year, use in combination with
|M, MM*||12||Month number|
|w, ww*||1||Week of year, use for week number formatting|
|d, dd*||30||Day of month|
|D, DD, DDD||364||Day of year|
|a||AM||AM or PM|
|h, hh*||12||Hour (1-12)|
|H, HH*||00||Hour (0-23)|
|k, kk*||24||Hour (1-24)|
|K, KK*||00||Hour (0-11)|
|S, SS, SSS||789||Milliseconds|
|E, EE||05||Day of week number|
|EEE||Tue||Day of week abbreviation|
|EEEE||Tuesday||Day of week name|
|z, zz, zzz, zzzz||Pacific Standard Time||Time zone|
|Z, ZZ, ZZZ||-04:00||Time zone offset|
|ZZZZ||GMT-04:00||Time zone offset|
*two characters pads with zero
These are some examples:
||Tuesday 30 December 2014 AD, 12:27 AM 16s|
||2014 364 00:27|
||Tuesday December 30 2014|
||Tue, Dec 30, ‘14|
||Tuesday, week 01 2015|
Even though a date picker with a custom date format is editable, the calendar drop-down button will only be shown if the custom format represents a full date (that is, the year [
yyyy], month [
MMMM], and day of month [
dd] tokens are all present in the custom format).
2.6.3 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.
Placeholder text will not be displayed if a native date picker is available (that is, for iOS and Android versions 4.0 and above).
2.7 Label Section
A label describes the purpose of a widget to the end-user.
For more information on properties of this section, see the Label Section section in Properties Common for Widgets.
2.8 Validation Section
This property indicates whether this widget value should be validated and, if so, how. These are the possible options:
- No validation
- A predefined validation
- A custom validation
The possible values of a predefined validation are the following:
- Required – all data types
- E-mail – string
- Positive number – decimal, float, integer, long
- Date in the future – dateTime
- Date in the past – dateTime
Custom validations are expressions that follow the Microflow expression syntax. Both
$value are in a scope that refers to the current object and the current member value, respectively. In Mendix 8.1 and above, the expression can access objects of all the data containers enclosing that data container widget. These objects are available under the name of the widget they originate from (for example,
When a validation is set and it fails for this widget, a message will be shown when the user selects Save.
Default value: (none)
This property determines the message that is shown to the user if widget validation is enabled and has failed. This is a translatable text (for more information, see Translatable Texts).
2.9 Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common for Widgets.