Gå til sidens indhold

Kode

Datoangivelse

For eksempel: 05 12 2018

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group  ">
    <fieldset>
        <legend><label class="form-label">Indsendelsesfrist</label>
            <span class="form-hint">For eksempel: 05 12 2018</span>
        </legend>
        <span class="form-error-message  d-none"
            id="form-error-message-input-error" role="alert"></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" />
            </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" />
            </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" />
            </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
  • Hvis du vil koble en datovælger på dit datofelt, kan du bruge plugins Pikaday.
  • Ved fejl, tilføj da en hjælpsom fejlbesked over felterne i elementet <span class="form-error-message" id="form-error-message-input-error" role="alert">.
  • Tilføj klassen form-errorform-group div elementet, når der vises en fejlbesked.

Varianter

Fejlbesked

<div class="form-group  form-error  ">
    <fieldset>
        <legend><label class="form-label">Datoangivelse med fejl</label>
            <span class="form-hint">For eksempel: 05 12 2018</span>
        </legend>
        <span class="form-error-message "
            id="form-error-message-input-error" role="alert">Skriv en kort
            fejlmeddelelse, der hjælper brugeren videre</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="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" />
            </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="12" 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" />
            </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="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" />
            </div>

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