Date - DatePicker
Date picker component
Component properties
Mask presentation (section Styling)
autoMask
Displaying the mask in the date field (default value "true").
Date format (section Basic properties)
dateFormat
Date format. By default set to dd-MM-yyyy. Values from which the date format can be composed:
yy - last two digits of the year
yyyy - year
MMMM - full month name
MMM - three-letter abbreviated month name (Jan, Feb, Mar, etc.)
MM - two-digit month number (months from 1 to 9 are preceded by a zero)
M - month number
d - day of the month number
dd - two-digit day of the month number (days from 1 to 9 are preceded by a zero)
EEEE - full day of the week name
EEE or EE - abbreviated day of the week name (Mon, Tue, etc.)
separators, e.g. space, dot, hyphen, etc.
The default date format for the component follows locale settings.
Note! Changing the date format affects how it is displayed in the default value (defaultValue). Any change to the format requires updating the default date.
Date range (section Data quality)
dateRange
Restricting the range of selectable dates. Available options:
ALL (all dates)
PAST (past dates including today)
PAST_WITHOUT_TODAY (past dates without today)
FUTURE (future dates including today)
FUTURE_WITHOUT_TODAY (future dates without today)
Field description (section Data quality)
description
Text displayed as a description of the field below it, by default this is an empty value. The availability of this functionality depends on the license and may not be available in all deployments.
Date change message (section Other)
dateRangeValidationText
Text displayed after changing the date when an invalid value has been entered. The default value is "The date has been changed."
Date set to today (section Other)
defaultValueOnToday
Displays the system date as the default value in the field (default value "false").
Drop-down list for selecting month/year (section Other)
useDropDownSelector
Enabled drop-down list for selecting month/year (default value "false").
With time (section Other)
withTime
Set to "true" means that after the date there will be a time in the format: 00:00
Unavailable dates
disabledDates
A comma-separated list of days (as timestamps) whose selection should be blocked.
More information about component properties: Common component properties
External data source
The control can be populated using a script, for which we can use an external data source. The external data source can be configured in the Interactions section, and the parameters we can set are:
service - the service that will provide data to display the control
input parameters - a list of service parameters that can be populated with variables or values from the application
output parameters - a list of output service parameters that we can map to component attributes; the list of available attributes is:
value - the initial value of the control represented by a timestamp. Example: 1739577600000
disabledDates - a list of dates the user will not be able to select. The value is a list of timestamps separated by commas. Example: 1739145600000,1739577600000
dateRange - the range of possible dates to select. The range is written as two timestamps separated by a comma. Example: 1738800000000,1740009600000
disabledInputTyping - will it be possible to enter the date? Possible values: true, false.
Example component settings
Set Date format (dateFormat) determines which date component appearance will be shown in the application, for example:
Additional component properties
Year display in the calendar header (section Other)
showYearInHeadline
In the calendar, the year is displayed next to the month (default value "true").
Selection from the calendar only (section Other)
disabledInputTyping
Set to "true" means that date selection will be possible only from the popup. It will not be possible to type the date manually into the field. Only for the DESKTOP channel.
Placeholder (section Data quality)
placeholderText
Text displayed as Placeholder field; by default it is an empty value.
Initial view (section Other)
startViewMode
The choice of the "screen" that appears first after clicking the calendar. Possible values: DEFAULT - same behavior as before, MULTI_YEAR - show the year selection screen as the first screen.
Date format for the field without focus (section Basic properties)
unfocusedFormat
Custom date format for the field that does not have focus.
Allowed formats are the same as in the field with Date format. If the field is empty, Date format for the field without focus it is the same as in the field with Date format. If the field is filled with a format other than Date format, then this value will be visible after leaving the field, and Date format after clicking the field.
Last updated
Was this helpful?