Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Datofelter

Tre separate felter for dato, måned og år er den nemmeste måde for brugeren at indskrive en dato.

Åbn dette eksempel i et nyt vindue: date-input
Eksempel på datofelter
Indsendelsesfrist For eksempel: 05 12 2018

Sådan bruges komponenten

Anvendes til

Sætter brugeren i stand til at tilføje struktureret datoinformation.

Anvendes ikke til

Når der er specifikt udvalgte datoer at vælge imellem som fx ved bookninger og planlægning med specifikke åbne og lukkede datoer.

Vejledning

Placér felterne i den rækkefølge for datoform, der anvendes i Danmark, det vil sige dag, måned og år.

Tilføj hjælpetekst, der viser formatet af datoen man efterspørger.

Ofte kan datofelter til indtastning være nemmere at anvende - og gøre tilgængeligt - end en datovælger (date picker) funktion.

Sådan (do)

Eksempel på, hvordan datoangivelse kan se ud

Sådan: Vis som udgangspunkt indtastningsfelter til datoer som 3 separate felter til dag, måned og år (Silver, 2018, s. 155-158). Brug de formular-elementer, der er mest effektive for brugerne. At indtaste en dato, en måned og et år i simple felter er i mange tilfælde hurtigere end at vælge datoerne via en datovælger (Babich, 2019; Enders, 2016, s. 107-109).

Ikke sådan (don't)

Eksempel på, hvordan datoangivelse ikke bør se ud

Ikke sådan: Brug ikke opdelte indtastningsfelter til angivelse af datoer, når der er specifikt udvalgte datoer at vælge i mellem, samt når ugedage kan have betydning for brugerens valg. Anvend her i stedet datovælger.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Åbn dette eksempel i et nyt vindue: error-message-date
Eksempel på datofelter med fejlmeddelelse
Hvornår blev dit pas udstedt? For eksempel: 05 12 2018 Fejl: Datoen kan ikke være i fremtiden

Se komponenten i eksempelløsninger

Trinformular til registrering: Tidligere registrering (vælg ‘Ja’)

Referencer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <fieldset aria-describedby="date-input-example-hint ">
        <legend class="form-label">
            Indsendelsesfrist
        </legend>
        <span class="form-hint" id="date-input-example-hint">For eksempel: 05 12 2018</span>

        <div class="date-group mt-3">

            <div class="form-group form-group-day">
                <label class="form-label" for="date-input-example-day">Dag</label>

                <input type="number" id="date-input-example-day" name="deadline-day"
                    class="form-input" required>
            </div>

            <div class="form-group form-group-month">
                <label class="form-label" for="date-input-example-month">Måned</label>

                <input type="number" id="date-input-example-month" name="deadline-month"
                    class="form-input" required>
            </div>

            <div class="form-group form-group-year">
                <label class="form-label" for="date-input-example-year">År</label>

                <input type="number" id="date-input-example-year" name="deadline-year"
                    class="form-input" required>
            </div>

        </div>
    </fieldset>
</div>
  • Anvend ikke JavaScript til automatisk at flytte fokus fra felt til felt, da det gør det svært for tastatur-brugere at navigere i formularen.
  • Datofelter-komponenten består af 3 inputfelter.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og fejlmeddelelser’s implementering med datofelter.

Når der vises en fejlmeddelelse, vis da også en fejlopsummering.