# Date - DatePicker
Date picker component
## Component properties
| Eximee Designer property | Attribute name in Source | Description |
| ------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
Mask presentation (section Styling)
| autoMask | Displaying the mask in the date field (default value "true"). |
|
Date format (section Basic properties)
| dateFormat |
Date format. Default set to dd-MM-yyyy. Values that can be used to compose the date format:
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, period, hyphen, etc.
The default date format for the component is locale-aware.
Note! Changing the date format affects how it is displayed in the Default value (defaultValue). Any change of the format requires correcting the default date.
|
|
Date range (section Data quality)
| dateRange |
Narrowing the range of selectable dates. Available options:
| description | Text displayed as the field description below it; by default, it is empty. Availability of this functionality depends on the license and may not be available in all deployments. |
|
Date change message (section Other)
| dateRangeValidationText | Text shown after a date change when an invalid value has been entered. The default value is "*The date has been changed.*" |
|
Date set to today (section Other)
| defaultValueOnToday | Display the system date in the field as the default value (default value "false"). |
|
Dropdown for month/year selection (section Other)
| useDropDownSelector |
Enabled dropdown for month/year selection (default value "false").
|
|
With time (section Other)
| withTime | Set to "true" means that after the date the time will appear 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](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)
## External data source
We can feed the control using a script; to do this, 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 in the control
* input parameters - a list of service parameters that we can populate with variables or values from the application
* output parameters - a list of service output 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 days that the user will not be able to select. The value is a comma-separated list of timestamps. 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 a date? Possible values: true, false.
## Example component settings
Set **Date format** (dateFormat) determines which appearance of the date component will be shown in the application, for example:
| Setting in Eximee Designer | Appearance in the application |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
Year display in the calendar header (section Other)
| showYearInHeadline | The year is displayed in the calendar next to the month (default value "true"). |
|
Selection from 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 a date manually into the field. For DESKTOP channel only. |
|
Placeholder (section Data quality)
| placeholderText | Text displayed as **Placeholder** of the field; by default, it is empty. |
|
Initial view (section Other)
| startViewMode | Selection of the "screen" that appears first after clicking the calendar. Possible values DEFAULT - behavior as before, MULTI\_YEAR - show the year selection screen first. |
|
Date format for the unfocused field (section Basic properties)
| unfocusedFormat |
Custom date format for a field that is not focused.
Allowed formats are the same as in the field with Date format. If the field is empty, then Date format for the unfocused field 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 into the field.
|
{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md)
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/data-datepicker.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.