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 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
- Dag 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
<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>