Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Datoangivelse
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-regexhå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
- Dag 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-errorpåform-groupdivelementet, 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>