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.


Kode

Datoangivelse

Åbn dette eksempel i et nyt vindue: date-input
Indsendelsesfrist For eksempel: 05 12 2018 Fejl:

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group  ">
    <fieldset aria-describedby="example-date-field-hint ">
        <legend class="form-label">Indsendelsesfrist</legend>
        <span class="form-hint" id="example-date-field-hint">For eksempel:
            05 12 2018</span>
        <span class="form-error-message  d-none"
            id="example-date-field-error2"><span
                class="sr-only">Fejl:</span> </span>
        <div class="date-group js-calendar-group mt-3">
            <div class="form-group form-group-day">
                <label class="form-label" for="date-day">Dag</label>
                <input class="form-input js-calendar-day-input"
                    id="date-day" value="" type="tel" data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv dag på måneden som tal"
                    aria-describedby="example-date-field-hint" />
            </div>
            <div class="form-group form-group-month">
                <label class="form-label" for="date-month">Måned</label>
                <input class="form-input js-calendar-month-input"
                    id="date-month" value="" type="tel" data-min="1"
                    data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv månedens nummer"
                    aria-describedby="example-date-field-hint" />
            </div>
            <div class="form-group form-group-year ">
                <label class="form-label" for="date-year">År</label>
                <input class="form-input js-calendar-year-input"
                    id="date-year" value="" type="tel" data-min="1900"
                    data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$" title="Indskriv årstal"
                    aria-describedby="example-date-field-hint" />
            </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.
  • Dato-komponenten består af 2 dele: 3 input-felter og en datepicker.
  • Attributten data-input-regex håndteres af JavaScript via dkfds.js filen, som derfor bør importeres i projektet. Attributten forhindrer at brugeren kan indskrive tegn som ikke er tal, samt mere end 2 tal for dag og måned, og 4 tal i år-inputtet derudover Eksempel for dag og måned: ` data-input-regex=”^[0-9]{0,2}$”`
  • For at initialisere dato-komponenten skal .date-group-elementet have klassen .js-calendar-group. Derudover skal de tre inputfelter have følgende klasser:
    • Dag input: .js-calendar-day-input
    • Måned input: .js-calendar-month-input
    • År input: .js-calendar-year-input
  • Ved fejl, tilføj da en hjælpsom fejlmeddelelse over felterne i elementet <span class="form-error-message" id="form-error-message-input-error" role="alert">.
  • Tilføj klassen form-error på form-group div elementet, når der vises en fejlmeddelelse.

Varianter

Fejlmeddelelse

Vis dette eksempel i et nyt vindue: date-input-error 
<div class="form-group  form-error  ">
    <fieldset
        aria-describedby="example-date-field-hint2 example-date-field-error">
        <legend class="form-label">Datoangivelse med fejl</legend>
        <span class="form-hint" id="example-date-field-hint2">For eksempel:
            05 12 2018</span>
        <span class="form-error-message "
            id="example-date-field-error"><span
                class="sr-only">Fejl:</span> Indtast en måned i tal mellem
            1 og 12</span>
        <div class="date-group js-calendar-group mt-3">
            <div class="form-group form-group-day">
                <label class="form-label" for="date-day2">Dag</label>
                <input class="form-input js-calendar-day-input"
                    id="date-day2" value="01" type="tel" data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv dag på måneden som tal"
                    aria-describedby="example-date-field-hint2" />
            </div>
            <div class="form-group form-group-month">
                <label class="form-label" for="date-month2">Måned</label>
                <input class="form-input js-calendar-month-input"
                    id="date-month2" value="20" type="tel" data-min="1"
                    data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv månedens nummer"
                    aria-describedby="example-date-field-hint2" />
            </div>
            <div class="form-group form-group-year ">
                <label class="form-label" for="date-year2">År</label>
                <input class="form-input js-calendar-year-input"
                    id="date-year2" value="2030" type="tel" data-min="1900"
                    data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$" title="Indskriv årstal"
                    aria-describedby="example-date-field-hint2" />
            </div>

        </div>
    </fieldset>
</div>