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="col-12 col-md-4">
    <div class="date-picker">
        <div class="form-group">
            <input class="form-control form-control--date-picker" name="date" type="text" placeholder="16. Listopad 2017" autocomplete="off">
            <span class="pvs-theme-icon-calendar date-picker--icon"></span>
            <span class="help-block">Vyberte měsíc a rok</span>
        </div>
    </div>
</div>

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

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).

Užitečné odkazy