Gå til sidens indhold
Det Fælles DesignsystemDevelop

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Datovælger

Ét felt med knap, hvor man kan vælge en dato.

Åbn dette eksempel i et nyt vindue: date-picker
Eksempel på datovælger

Sådan bruges komponenten

Anvendes til

Når der er specifikt udvalgte datoer at vælge imellem som fx ved bookninger og planlægning med åbne og lukkede datoer, og hvor det gavner brugeren at se hvilke ugedage forskellige datoer rammer.

Anvendes ikke til

Datoangivelser som er givet for brugeren, som fx en fødselsdato. Brug da komponenten datofelter.

Vejledning

Sådan (do)

Eksempel på, hvordan datoangivelse kan se ud

Sådan: Brug datovælgeren, når der er specifikt udvalgte datoer at vælge imellem, samt når det gavner brugeren at se, hvilke ugedage forskellige datoer rammer.

Ikke sådan (don't)

Eksempel på, hvordan datoangivelse ikke bør se ud

Ikke sådan: Undgå avancerede datovælgere, når brugerne kun skal angive en enkelt dato og ikke et datointerval, og når datoen ligger mere end et år fra dags dato (Li, 2017). I sådanne tilfælde kan en datovælger medføre, at brugerne skal klikke urimeligt mange gange (Enders, 2016, s. 106). Anvend derfor i stedet datofelter.

Varianter

Begræns mulige datoer

Definér datoer det er muligt for brugeren at vælge fra.

I eksemplet kan brugeren kun vælge datoer mellem 4. december til og med 24. december 2020. Man kan kun vælge datoer inden for dette interval. En anden mulighed kunne også være dags dato og 1 år frem, således at man kun kan vælge en dag i fremtiden.

Åbn dette eksempel i et nyt vindue: date-picker-interval
Eksempel på datovælger med begrænsning
Gå til eksemplets kode: date-picker-interval

Fast værdi

Definér en dato som udgangspunkt. Hvis datoen ikke defineres vil udgangspunktet være dags dato.

I eksemplet er der valgt at man ved aktivering af datovælgeren starter fokus d. 1 december 2020. Datoen er ikke valgt, man tager blot udgangspunkt i den dag i kalenderen. Hvis man ikke vælger en fast værdi, vil datoen i stedet være dags dato.

Åbn dette eksempel i et nyt vindue: date-picker-default-date
Eksempel på datovælger med fast værdi
Gå til eksemplets kode: date-picker-default-date

Datoformat

Som standard vises en dato i formatet DD/MM/ÅÅÅÅ, efter en bruger har valgt en dato i datovælgeren. Der findes dog også andre datoformater, der kan anvendes i stedet. Bemærk, at brugeren altid kan anvende alle datoformater, hvis de selv indtaster datoen i feltet.

Åbn dette eksempel i et nyt vindue: date-picker-format
Eksempel på datovælger med andet datoformat
Valgte datoer vises i formatet DD-MM-ÅÅÅÅ
Gå til eksemplets kode: date-picker-format

Deaktiveret

Åbn dette eksempel i et nyt vindue: date-picker-disabled
Eksempel på deaktiveret datovælger
Gå til eksemplets kode: date-picker-disabled

Bemærk, at deaktiverede datovælgere hverken har kontrastkrav eller kan få fokus og dermed kan være svære at opdage, fx når man anvender en skærmlæser. Det anbefales derfor, at man helt undlader datovælgeren i stedet for at deaktivere den.

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="datepicker-example1">Dato for aftale</label>

    <div class="date-picker">
        <input type="text" id="datepicker-example1" name="appointment-date1"
            class="form-input" required>
    </div>
</div>

Javascript

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

DKFDS.datePicker.on(document.body);

Bemærk: I visse frameworks kan ovenstående initialisering give problemer med at åbne kalenderen. Hvis du oplever dette problem, prøv da at anvende DKFDS.datePicker.init(document.body) i stedet for.

Sprog

Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden for datovælgeren, skal du selv give din oversættelse med inden komponenten initialiseres. Husk at opdatere værdien i attributten “lang” i din sides html-tag. Indholdet i krøllede parenteser {...} nedenunder skal ikke oversættes eller ændres. Bemærk, at ændring af sproget påvirker alle datovælgere på siden.

DKFDS.datePicker.setLanguage({
  "open_calendar": "Åbn kalender",
  "choose_a_date": "Vælg en dato",
  "choose_a_date_between": "Vælg en dato mellem {minDay}. {minMonthStr} {minYear} og {maxDay}. {maxMonthStr} {maxYear}",
  "choose_a_date_before": "Vælg en dato. Der kan vælges indtil {maxDay}. {maxMonthStr} {maxYear}.",
  "choose_a_date_after": "Vælg en dato. Der kan vælges fra {minDay}. {minMonthStr} {minYear} og fremad.",
  "aria_label_date": "{dayStr} den {day}. {monthStr} {year}",
  "current_month_displayed": "Viser {monthLabel} {focusedYear}",
  "first_possible_date": "Første valgbare dato",
  "last_possible_date": "Sidste valgbare dato",
  "previous_year": "Navigér ét år tilbage",
  "previous_month": "Navigér én måned tilbage",
  "next_month": "Navigér én måned frem",
  "next_year": "Navigér ét år frem",
  "select_month": "Vælg måned",
  "select_year": "Vælg år",
  "previous_years": "Navigér {years} år tilbage",
  "next_years": "Navigér {years} år frem",
  "guide": "Navigerer du med tastatur, kan du skifte dag med højre og venstre piletaster, uger med op og ned piletaster, måneder med page up og page down-tasterne og år med shift-tasten plus page up eller page down. Home og end-tasten navigerer til start eller slutning af en uge.",
  "months_displayed": "Vælg en måned",
  "years_displayed": "Viser år {start} til {end}. Vælg et år.",
  "january": "januar",
  "february": "februar",
  "march": "marts",
  "april": "april",
  "may": "maj",
  "june": "juni",
  "july": "juli",
  "august": "august",
  "september": "september",
  "october": "oktober",
  "november": "november",
  "december": "december",
  "monday": "mandag",
  "tuesday": "tirsdag",
  "wednesday": "onsdag",
  "thursday": "torsdag",
  "friday": "fredag",
  "saturday": "lørdag",
  "sunday": "søndag"
  });
DKFDS.datePicker.on(document.body);

Funktioner

Funktion Element Beskrivelse
DKFDS.datePicker.getDatePickerContext(ELEMENT) Vilkårligt HTML element i datovælgeren Få fat i datovælger json objekt inklusiv alle HTML elementer i komponenten.
DKFDS.datePicker.validateDateInput(ELEMENT) Vilkårligt HTML element i datovælgeren Valider værdien i feltet, således at det er et korrekt datoformat og datoen eksisterer. Brug checkValidity() på input elementet efterfølgende.
DKFDS.datePicker.disable(ELEMENT) Vilkårligt HTML element i datovælgeren Deaktiver felt og knap i datovælgeren.
DKFDS.datePicker.enable(ELEMENT) Vilkårligt HTML element i datovælgeren Aktiver felt og knap i datovælgeren.

Begræns mulige datoer

Vis dette eksempel i et nyt vindue: date-picker-interval
Kodeeksempel
<div class="form-group">
    <label class="form-label" for="datepicker-example2">Dato for aftale</label>

    <div class="date-picker" data-min-date="2020-12-04" data-max-date="2020-12-24">
        <input type="text" id="datepicker-example2" name="appointment-date2"
            class="form-input" required>
    </div>
</div>
Gå til eksemplets retningslinjer

Fast værdi

Vis dette eksempel i et nyt vindue: date-picker-default-date
Kodeeksempel
<div class="form-group">
    <label class="form-label" for="datepicker-example3">Dato for aftale</label>

    <div class="date-picker" data-default-date="2020-12-01">
        <input type="text" id="datepicker-example3" name="appointment-date3"
            class="form-input" required>
    </div>
</div>
Gå til eksemplets retningslinjer

Datoformat

Anvend attributten data-dateformat. Mulige værdier er:

  • "DD/MM/YYYY" (default, hvis der ikke er nogen attribut)
  • "DD-MM-YYYY"
  • "DD.MM.YYYY"
  • "DD MM YYYY"
  • "DD/MM-YYYY"

Bemærk at valg af datoformat udelukkende påvirker, hvordan datoer vises i inputfeltet, efter brugeren har trykket på en dato i datovælgeren. Alle ovenstående datoformater er gyldige, hvis brugeren selv vælger at skrive datoen ind i feltet.

Vis dette eksempel i et nyt vindue: date-picker-format
Kodeeksempel
<div class="form-group">
    <label class="form-label" for="datepicker-format-example">Datoeksempel med
        bindestreger</label>

    <span class="form-hint" id="datepicker-format-example-hint">Valgte datoer vises i formatet
        DD-MM-ÅÅÅÅ</span>

    <div class="date-picker" data-dateformat="DD-MM-YYYY">
        <input type="text" id="datepicker-format-example" name="datepicker-format-example"
            class="form-input" aria-describedby="datepicker-format-example-hint " required>
    </div>
</div>
Gå til eksemplets retningslinjer

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og fejlmeddelelser’s implementering med datovælgeren.

Når der vises en fejlmeddelelse, vis da også en fejlopsummering.

Deaktiveret

Vis dette eksempel i et nyt vindue: date-picker-disabled
Kodeeksempel
<div class="form-group">
    <label class="form-label  disabled" for="datepicker-example1-disabled">Dato for
        aftale</label>

    <div class="date-picker">
        <input type="text" id="datepicker-example1-disabled"
            name="datepicker-example1-disabled" class="form-input" disabled="disabled">
    </div>
</div>
Gå til eksemplets retningslinjer

Om custom elements

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet.

Eksempler

Åbn i et nyt vindue 
<fds-date-picker>
    <label>Datovælger</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-default">
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Varianter

Fejl

<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.

Åbn i et nyt vindue
Dette er en fejl 
<fds-date-picker>
    <label>Datovælger med fejl</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-error">
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
    <fds-error-message id="error1">Dette er en fejl</fds-error-message>
</fds-date-picker>

Attributter til <fds-error-message>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
icon-text Sæt en anden tekst på fejlikonet.
hidden Styrer synligheden af fejlmeddelelsen.

Events fra <fds-error-message>

Event Beskrivelse
error-message-visibility-changed Afsender en hændelse til forælderkomponenter, når synligheden ændres.
error-message-callback Afsender en hændelse til opdatering af forælderkomponenten.

Hjælpetekst

<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.

Åbn i et nyt vindue
Dette er en hjælpetekst 
<fds-date-picker>
    <label>Datovælger med hjælpetekst</label>
    <fds-help-text id="help1">Dette er en hjælpetekst</fds-help-text>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-helptext">
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Attributter til <fds-help-text>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
hidden Styrer synligheden af hjælpeteksten.

Events fra <fds-help-text>

Event Beskrivelse
help-text-callback Afsender en hændelse til opdatering af forælderkomponenten.

Begræns mulige datoer

Åbn i et nyt vindue 
<fds-date-picker>
    <label>Datovælger med begrænsede datoer</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-minmax">
        <div><fds-date-picker-grid min-date="2000-02-02" max-date="2000-02-20"></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Fast værdi

Åbn i et nyt vindue 
<fds-date-picker>
    <label>Datovælger med default dato</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-defaultdate">
        <div><fds-date-picker-grid default-date="2028-09-05"></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Datoformat

Åbn i et nyt vindue
Format sat til dd-mm-yyyy 
<fds-date-picker format="DD-MM-YYYY">
    <label>Datovælger med nyt format</label>
    <fds-help-text id="help2">Format sat til dd-mm-yyyy</fds-help-text>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-format">
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Deaktiveret

Åbn i et nyt vindue 
<fds-date-picker>
    <label>Datovælger</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-disabled" disabled>
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
</fds-date-picker>

Start- og slutdato

Åbn i et nyt vindue 
<div class="d-flex">
    <fds-date-picker class="mr-4">
        <label>Startdato</label>
        <div>
            <input type="text" name="input-text" id="ce-datepicker-example-startdate">
            <div><fds-date-picker-grid id="startdate-date-picker" start-date-id="start-end-example1"></fds-date-picker-grid></div>
        </div>
    </fds-date-picker>
    <fds-date-picker class="mt-0">
        <label>Slutdato</label>
        <div>
            <input type="text" name="input-text" id="ce-datepicker-example-enddate">
            <div><fds-date-picker-grid id="enddate-date-picker" end-date-id="start-end-example1"></fds-date-picker-grid></div>
        </div>
    </fds-date-picker>
</div>

Konfiguration

Attributter

Attribut Beskrivelse
show-required-status Viser om inputfeltet er obligatorisk eller frivilligt. Indsæt en tekst i attributten for at overskrive default-teksten.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies