Kode

Datofelter

Åbn dette eksempel i et nyt vindue

Indsendelsesfrist For eksempel: 05 12 2018

Dag

Måned

År

Eksempler og retningslinjer

Installation

HTML Struktur

<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 js-calendar-group mt-3">

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

                <input type="tel" id="date-input-example-day"
                    class="form-input js-calendar-day-input" required data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast dag på måneden som tal">
            </div>

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

                <input type="tel" id="date-input-example-month"
                    class="form-input js-calendar-month-input" required data-min="1"
                    data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast månedens nummer">
            </div>

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

                <input type="tel" id="date-input-example-year"
                    class="form-input js-calendar-year-input" required data-min="1900"
                    data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$" title="Indtast årstal">
            </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.
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

Javascript

Datofelterne kræver JavaScript for at maskerne virker. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new InputRegexMask(document.getElementById('DAY-INPUT-ID'));
new InputRegexMask(document.getElementById('MONTH-INPUT-ID'));
new InputRegexMask(document.getElementById('YEAR-INPUT-ID'));

Fejlmeddelelse

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