1. Komponenty

Výběr data

angl. Datepicker

Slouží k zadávání data automatickým zobrazením kalendáře.

Výběr data pro zadání jednoho bodu v čase.


<div class="min-height--datepicker">
    <div class="col-12 col-sm-8 col-md-6 col-lg-4">
        <div class="date-picker">
            <div class="form-group">
                <input class="form-control form-control--date-picker form-control--not-empty" name="date" type="text" placeholder="16. listopad 2017" autocomplete="off">
                <span class="pvs-theme-icon-calendar date-picker--icon" tabindex="0"></span>
                <span class="help-block">Vyberte datum</span>
            </div>
        </div>
    </div>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech). Více o typech zařízení najdete na stránce Mřížka.

Pro náhled chování na menším zařízení lze kliknout vpravo v rohu u náhledu komponenty na tlačítko “živý náhled” a komponentu si libovolně zmenšit podle potřeby.

Použití

  • Pro zadávání termínů událostí, které se konají v blízké budoucnosti nebo událostí, které se odehrály v nedaleké minulosti.
  • Pro výběr data ve formátu dd/mm/rrrr (typicky se používá ve formulářích)
  • Použijte předvyplněné datum v případě, že je první termín do deseti dnů
  • Předvyplněnou hodnotu nepoužívejte v případě, že chcete znát datum narození

Označení

Komponenta pro výběr data je vždy označena a řídí se stejnými pravidly jako Formuláře.

Formát

U komponenty pro výběr data je potřeba ve výchozím stavu použít zástupný text (Placeholder). V zástupném textu je uvedeno v jakém formátu má uživatel data zadávat (dd/mm/rrrr).

Ovládání pomocí klávesnice

Výběr data se dá plnohodnotně ovládat i z klávesnice s určitými specifiky popsanými níže. Během navigování v kalendáři je “vybrané datum” zvýrazněno (stejně jako při přejetí myší).

Šipky - nahoru, dolů, doleva, doprava

Šipkou doleva/doprava posuneme focus o jeden den zpět/vpřed. Šipkou nahoru/dolů posuneme focus o týden.

Pomocí klávesy SHIFT a šipky doleva/nahoru posuneme focus o měsíc zpět. Pomocí klávesy SHIFT a šipky dolů/doprava posuneme focus o měsíc vpřed.

Pomocí klávesy CTRL a šipky doleva/nahoru posuneme focus o rok zpět. Pomocí klávesy SHIFT a šipky dolů/doprava posuneme focus o rok vpřed. Pro zařízení s macOS a příslušnou klávesnicí je variantě tato funkce CONTROL+COMMAND.

Současné použití kláves CTRL a SHIFT funguje stejně jako klávesa CTRL.

Klávesa enter

Pokud je kalendář ve výběru data zobrazený, datum, na kterém je focus, pomocí klávesy ENTER vybereme. Pokud kalendář není zobrazený, klávesou ENTER standardně odešleme aktuální formulář.

Klávesa esc

Klávesu ESC lze použít ke skrytí a opětovnému zobrazení focusu.

Popis chování je přebrán a inspirován z dokumentace použité komponenty.

Užitečné odkazy