Komponenter
Datofelter
Tre separate felter for dato, måned og år er den nemmeste måde for brugeren at indskrive en dato.
Sådan bruges komponenten
Anvendes til
Sætter brugeren i stand til at tilføje struktureret datoinformation.
Anvendes ikke til
Når der er specifikt udvalgte datoer at vælge imellem som fx ved bookninger og planlægning med specifikke åbne og lukkede datoer.
Vejledning
Placér felterne i den rækkefølge for datoform, der anvendes i Danmark, det vil sige dag, måned og år.
Tilføj hjælpetekst, der viser formatet af datoen man efterspørger.
Ofte kan datofelter til indtastning være nemmere at anvende - og gøre tilgængeligt - end en datovælger (date picker) funktion.
Sådan (do)
Sådan: Vis som udgangspunkt indtastningsfelter til datoer som 3 separate felter til dag, måned og år (Silver, 2018, s. 155-158). Brug de formular-elementer, der er mest effektive for brugerne. At indtaste en dato, en måned og et år i simple felter er i mange tilfælde hurtigere end at vælge datoerne via en datovælger (Babich, 2019; Enders, 2016, s. 107-109).
Ikke sådan (don't)
Ikke sådan: Brug ikke opdelte indtastningsfelter til angivelse af datoer, når der er specifikt udvalgte datoer at vælge i mellem, samt når ugedage kan have betydning for brugerens valg. Anvend her i stedet datovælger.
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.
Når der vises en fejlmeddelelse, vis da også fejlopsummering.
Se komponenten i eksempelløsninger
Trinformular til registrering: Tidligere registrering (vælg ‘Ja’)
Referencer
- Adam Silver: Form Design Patterns (2018)
- Nick Babich: Date Picker Design Best Practices (2019)
- Jessica Enders: Designing UX: Forms (2016)
- Angie Li: Date-Input Form Fields: UX Design Guidelines (2017)
- GovUKs anbefalinger til datovælgeren, samt for fejlmeddelelser til datoer
- GovUK om at spørge brugeren om datoer
- GovUK om fejlmeddelelser generelt
Installation
HTML Struktur
Kodeeksempel
<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 mt-3">
<div class="form-group form-group-day">
<label class="form-label" for="date-input-example-day">Dag</label>
<input type="number" id="date-input-example-day" name="deadline-day"
class="form-input" required>
</div>
<div class="form-group form-group-month">
<label class="form-label" for="date-input-example-month">Måned</label>
<input type="number" id="date-input-example-month" name="deadline-month"
class="form-input" required>
</div>
<div class="form-group form-group-year">
<label class="form-label" for="date-input-example-year">År</label>
<input type="number" id="date-input-example-year" name="deadline-year"
class="form-input" required>
</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.
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og fejlmeddelelser’s implementering med datofelter.
Når der vises en fejlmeddelelse, vis da også en fejlopsummering.
Web Component-koden er i beta
Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-fdfbbdec">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1be579c9">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-f31c34cb">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-fdfbbdec">Dag</label>
<input name="day" id="dat-day-fdfbbdec" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1be579c9">Måned</label>
<input name="month" id="dat-month-1be579c9" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-f31c34cb">År</label>
<input name="year" id="dat-year-f31c34cb" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Om denne komponent
Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.
Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.
Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.
Varianter
Fejl
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-450e93ab">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-bc1fc9e8">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-4783fc19">
</div>
</div>
<fds-error-message id="errore8d9ef0e">Der er sket en fejl</fds-error-message>
</fieldset>
</fds-date-input>
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-1ab610af">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-2b9149d1">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-5572ff30">
</div>
</div>
<fds-error-message targets="day, year" id="errorcafee2aa">Fejl i indtastet dag og år</fds-error-message>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset aria-describedby="errore8d9ef0e">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-450e93ab">Dag</label>
<input name="day" id="dat-day-450e93ab" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-bc1fc9e8">Måned</label>
<input name="month" id="dat-month-bc1fc9e8" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-4783fc19">År</label>
<input name="year" id="dat-year-4783fc19" type="number">
</div>
</div>
<fds-error-message id="errore8d9ef0e">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Der er sket en fejl</span>
</fds-error-message>
</fieldset>
</fds-date-input>
<fds-date-input>
<fieldset aria-describedby="errorcafee2aa">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-1ab610af">Dag</label>
<input name="day" id="dat-day-1ab610af" type="number" aria-invalid="true">
</div>
<div data-attribute="month">
<label for="dat-month-2b9149d1">Måned</label>
<input name="month" id="dat-month-2b9149d1" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-5572ff30">År</label>
<input name="year" id="dat-year-5572ff30" type="number" aria-invalid="true">
</div>
</div>
<fds-error-message targets="day, year" id="errorcafee2aa">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Fejl i indtastet dag og år</span>
</fds-error-message>
</fieldset>
</fds-date-input>Hjælpetekst
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<fds-help-text id="help9c6e2d9d">Dette er en hjælpetekst</fds-help-text>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-d16cdbdf">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1bd0bdef">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-26f9a2e8">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset aria-describedby="help9c6e2d9d">
<legend>Indtast dato</legend>
<fds-help-text id="help9c6e2d9d" class="help-text">Dette er en hjælpetekst</fds-help-text>
<div>
<div data-attribute="day">
<label for="dat-day-d16cdbdf">Dag</label>
<input name="day" id="dat-day-d16cdbdf" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1bd0bdef">Måned</label>
<input name="month" id="dat-month-1bd0bdef" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-26f9a2e8">År</label>
<input name="year" id="dat-year-26f9a2e8" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Obligatoriske og frivillige inputfelter
<fds-date-input input-required show-required-status>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-1751c6c4">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-a76c9d44">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-400a32d5">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-7bfcd04c">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1035758b">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-d522cdfd">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input input-required show-required-status="required">
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-97d3901c">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-d9ae2be8">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-1368cd98">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="optional">
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-3a92750e">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-dca46fa3">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-54516da7">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input input-required="" show-required-status="">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (frivilligt)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-1751c6c4">Dag</label>
<input name="day" id="dat-day-1751c6c4" type="number" required="">
</div>
<div data-attribute="month">
<label for="dat-month-a76c9d44">Måned</label>
<input name="month" id="dat-month-a76c9d44" type="number" required="">
</div>
<div data-attribute="year">
<label for="dat-year-400a32d5">År</label>
<input name="year" id="dat-year-400a32d5" type="number" required="">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (frivilligt)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-7bfcd04c">Dag</label>
<input name="day" id="dat-day-7bfcd04c" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1035758b">Måned</label>
<input name="month" id="dat-month-1035758b" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-d522cdfd">År</label>
<input name="year" id="dat-year-d522cdfd" type="number">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input input-required="" show-required-status="required">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (required)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-97d3901c">Dag</label>
<input name="day" id="dat-day-97d3901c" type="number" required="">
</div>
<div data-attribute="month">
<label for="dat-month-d9ae2be8">Måned</label>
<input name="month" id="dat-month-d9ae2be8" type="number" required="">
</div>
<div data-attribute="year">
<label for="dat-year-1368cd98">År</label>
<input name="year" id="dat-year-1368cd98" type="number" required="">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="optional">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (optional)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-3a92750e">Dag</label>
<input name="day" id="dat-day-3a92750e" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-dca46fa3">Måned</label>
<input name="month" id="dat-month-dca46fa3" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-54516da7">År</label>
<input name="year" id="dat-year-54516da7" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Deaktiveret
<fds-date-input>
<fieldset disabled>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-4782dcc3">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-6ddc63c0">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-b579da81">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset disabled="">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-4782dcc3">Dag</label>
<input name="day" id="dat-day-4782dcc3" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-6ddc63c0">Måned</label>
<input name="month" id="dat-month-6ddc63c0" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-b579da81">År</label>
<input name="year" id="dat-year-b579da81" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Konfiguration
fds-date-input
Attributter
| Attribut | Beskrivelse |
|---|---|
| show-required-status | Viser om datofelterne er obligatoriske eller frivillige baseret på required-attributten. Indsæt en tekst i attributten for at overskrive default-teksten. |
| legend | Overskriv teksten i fieldset-elementets legend. Default er Indtast dato. |
| input-id | Tilføj et fælles ID-suffiks til datofelterne. Hvert felt får ID’et dag-/måned-/år- efterfulgt af den angivne værdi. |
| input-readonly | Sæt til true for at gøre alle datofelter read-only. |
| input-required | Sæt til true for at gøre alle datofelter obligatoriske. |
fds-help-text
Attributter
| Attribut | Beskrivelse |
|---|---|
| id | ID for hjælpeteksten. Hvis denne er udeladt, genereres et tilfældigt ID. |
| hidden | Skjuler hjælpeteksten. Skal sættes til true eller være tom for at tage effekt. |
Events
| Event | Beskrivelse |
|---|---|
| help-text-callback | Udløses på det omsluttende element, når hjælpeteksten tilføjes, fjernes, eller dens hidden-attribut ændres. |
| help-text-visibility-changed | Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.helptextId indeholder
hjælpetekstens ID, og event.detail.isHidden angiver, om den er skjult. |
fds-error-message
Attributter
| Attribut | Beskrivelse |
|---|---|
| id | ID for fejlbeskeden. Hvis denne er udeladt, genereres et tilfældigt ID. |
| icon-text | Skærmlæsertekst for ikonet. Default er Fejl. |
| hidden | Skjuler fejlbeskeden. Skal sættes til true eller være tom for at tage effekt. |
| targets | Bruges kun af fds-date-input. Angiv ID'er eller navne på de inputfelter, fejlbeskeden er relateret til, separeret med komma. |
| message | Teksten der skal vises i fejlbeskeden. Kan også angives som indhold i elementet. |
Events
| Event | Beskrivelse |
|---|---|
| error-message-callback | Udløses på det omsluttende element, når fejlbeskeden tilføjes, fjernes, eller en af dens attributter ændres. |
| error-message-visibility-changed | Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.errorId indeholder fejlbeskedens ID, og event.detail.isHidden angiver, om den er skjult. |