# Data - DatePicker

Komponent wyboru daty

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/f16dkO410GdfwWO99bO1/5_files/image2025-5-14_15-2-16.png)

## Właściwości komponentu

| Właściwość Eximee Designer                                                                                  | Nazwa atrybutu w Źródle | Opis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Prezentacja maski</strong><br>(sekcja <strong>Stylizacja</strong>)</p>                           | autoMask                | Wyświetlenie maski w polu daty (domyślna wartość "true").                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>Format daty</strong><br>(sekcja <strong>Podstawowe właściwości</strong>)<br></p>                 | dateFormat              | <p>Format daty. Domyślnie ustawiony na dd-MM-yyyy.Wartości, z których można ułożyć format daty:</p><ul><li>yy - ostatnie dwie cyfry roku</li><li>yyyy - rok</li><li>MMMM - pełna nazwa miesiąca</li><li>MMM - trzyliterowa, skrócona nazwa miesiąca (sty, lut, mar itd.)</li><li>MM - dwucyfrowa liczba miesiąca (miesiące od 1 do 9 poprzedza zero)</li><li>M - liczba miesiąca</li><li>d - liczba dnia miesiąca</li><li>dd - dwucyfrowa liczba dnia miesiąca (dni od 1 do 9 poprzedza zero)</li><li>EEEE - pełna nazwa dnia tygodnia</li><li>EEE lub EE - skrócona nazwa dnia tygodnia (pn, wt itd.)</li><li>seperatory np. spacja, kropka, myślnik itd.</li></ul><p>Domyślny format daty dla komponentu jest zgodny z ustawieniami regionalnymi.</p><p>Uwaga! zmiana formatu daty wpływa na sposób wyświetlania jej w <strong>Wartości domyślnej</strong> (defaultValue). Każda zmiana formatu wymaga poprawienia domyślnej daty.</p> |
| <p><strong>Zakres dat</strong><br>(sekcja <strong>Jakość danych</strong>)<br></p>                           | dateRange               | <p>Zawężanie przedziału dat możliwych do wyboru. Dostępne opcje:</p><ul><li><strong>ALL</strong> (wszystkie daty)</li><li><strong>PAST</strong> (daty z przeszłości wraz z dzisiejszą)</li><li><strong>PAST\_WITHOUT\_TODAY</strong> (daty z przeszłości bez dzisiejszej)</li><li><strong>FUTURE</strong> (daty z przyszłości wraz z dzisiejszą)</li><li><strong>FUTURE\_WITHOUT\_TODAY</strong> (daty z przyszłości bez dzisiejszej)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>Opis pola</strong><br>(sekcja <strong>Jakość danych</strong>)<br></p>                            | description             | Tekst wyświetlany jako opis pola poniżej niego, domyślnie jest to wartość pusta. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>Komunikat zmiany daty</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>                    | dateRangeValidationText | Tekst pokazywany po zmianie daty w momencie, gdy wprowadzona została nieprawidłowa wartość. Domyślną wartością jest "*Data została zmieniona.*"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>Data ustawiona na dzisiaj</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>                | defaultValueOnToday     | Wyświetlenie w polu jako domyślnej wartości daty systemowej (domyślna wartość "false").                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>Lista rozwijana dla wyboru miesiąca/roku</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p> | useDropDownSelector     | <p>Włączona lista rozwijana dla wyboru miesiąca/roku (domyślna wartość "false").<br></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><strong>Ze wskazaniem czasu</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>                      | withTime                | Ustawione na "true" oznacza, że po dacie pojawi się czas w formacie: 00:00                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Niedostępne daty**                                                                                        | disabledDates           | Lista dni (jako timestampy) oddzielonych przecinkiem, których wybór ma zostać zablokowany.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

## Źródło danych zewnętrznych

Kontrolkę możemy zasilić używając skryptu, do tego możemy użyć źródła danych zewnętrznych. Źródło danych zewnętrznych możemy skonfigurować w sekcji Interakcje, a parametry jakie możemy ustawić to:

* serwis - serwis, który dostarczy dane do wyświetlenia kontrolki
* parametry wejściowe - lista parametrów serwisu, które możemy zasilić zmiennymi lub wartościami z wniosku
* parametry wyjściowe - lista parametrów wyjściowych serwisu, które możemy mapować na atrybuty komponentu, lista dostępnych atrybutów to:
  * value - wartość początkowa kontrolki przedstawiona przez znacznik czasowy. Przykład: 1739577600000
  * disabledDates - lista dni, których użytkownik nie będzie mógł wybrać. Wartością jest lista znaczników czasowych oddzielonych przecinkiem. Przykład: 1739145600000,1739577600000
  * dateRange - zakres możliwych dat do wyboru. Zakres zapisujemy w formie dwóch znaczników czasowych oddzielonych przecinkiem. Przykład: 1738800000000,1740009600000
  * disabledInputTyping - czy będzie możliwe wpisanie daty? Możliwe wartości: true, false.

## Przykładowe ustawienia komponentu

Ustawiony **Format daty** (dateFormat) decyduje jaki wygląd komponentu daty zostanie zaprezentowany na wniosku, przykładowo:

| Ustawienie w Eximee Designer                                                                                                                           | Wygląd na wniosku                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><br><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/541vbmY2F8CAoq3BkPD0/5_files/image2022-12-16_13-15-28.png" alt=""></p> | <img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/A7RdJQvIVuhJJN5gUIcR/5_files/image2025-5-19_12-48-14.png" alt="" data-size="original"> |
| ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/K4UxGJecLXRPKtCXnj4p/5_files/image2022-12-16_13-16-25.png)                          | ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/sByRrdlNurPEuSGn5JJE/5_files/image2025-5-19_12-48-40.png)                                    |

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FftFwij6eOSLiA0dTNX7x%2Fimage2025-5-19_12-49-27.png?alt=media&#x26;token=b7923ff1-576d-413f-8738-cf6871b729fb" alt="" width="491"><figcaption><p align="center"><em><strong>Ilustracja 1.</strong> Inne konfiguracje przykładowego wyglądu komponentu na wniosku</em></p></figcaption></figure>

<div><figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FauwGWUpsjHKOqnV0TRxV%2Fimage2025-5-19_12-46-52.png?alt=media&#x26;token=8f7f9ab8-6253-4b89-919d-314ab384907e" alt=""><figcaption></figcaption></figure> <figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWBNJGE7NJyHEv01izFsz%2Fimage2025-5-19_12-45-1.png?alt=media&#x26;token=fa23be95-cd9a-41f7-98af-5cbb4df14f12" alt=""><figcaption><p align="center"><em><strong>Ilustracja 2. i 3.</strong> Przykładowy wygląd popupów z kalendarzami</em></p></figcaption></figure></div>

{% hint style="info" %}
Wniosek demo: demoDatePicker
{% endhint %}

## Dodatkowe właściwości komponentu <a href="#datawlasciwoscidodatkowe-dodatkowewlasciwoscikomponentu" id="datawlasciwoscidodatkowe-dodatkowewlasciwoscikomponentu"></a>

| Właściwość Eximee Designer                                                                                      | Nazwa atrybutu w Źródle | Opis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>Prezentacja roku w nagłówku kalendarza</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>       | showYearInHeadline      | W kalendarzu obok miesiąca wyświetlany jest rok (domyślna wartość "true").                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>Wybór tylko z kalendarza</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>                     | disabledInputTyping     | Ustawione na "true" oznacza, że możliwy będzie wybór daty wyłącznie z popupa. Nie będzie można wpisać daty ręcznie do pola. Wyłącznie dla kanału DESKTOP.                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>Placeholder</strong><br>(sekcja <strong>Jakość danych</strong>)<br></p>                              | placeholderText         | Tekst wyświetlany jako **Placeholder** pola, domyślnie jest to wartość pusta.                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <p><strong>Widok startowy</strong><br>(sekcja <strong>Pozostałe</strong>)<br></p>                               | startViewMode           | Wybór "ekranu", który pojawi się jako pierwszy po kliknięciu w kalendarz. Możliwe wartości DEFAULT - zachowanie jak do tej pory, MULTI\_YEAR - wyświetlenie jako pierwszego ekranu z wyborem roku.                                                                                                                                                                                                                                                                                               |
| <p><strong>Format daty dla pola bez focusa</strong><br>(sekcja <strong>Podstawowe właściwości</strong>)<br></p> | unfocusedFormat         | <p>Niestandardowy format daty dla pola, na którym nie ma focusa.</p><p>Dopuszczalne formaty są takie same jak w polu z <strong>Formatem daty</strong>. Jeśli pole jest niewypełnione, to <strong>Format daty dla pola bez focusa</strong> jest taki sam jak na polu z <strong>Formatem daty</strong>. Jeśli pole jest wypełnione innym formatem niż <strong>Format daty</strong>, wówczas ta wartość będzie widoczna po wyjściu z pola, a <strong>Format daty</strong> po kliknięciu w pole.</p> |

{% hint style="info" %}
♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}