Gå til sidens indhold
Det Fælles DesignsystemDevelop
Komponenter

Datovælger

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

Denne komponent er opdateret i Web Component-versionen

Komponenten har fået nyt udseende og funktionalitet samt forbedret tilgængelighed. De nye retningslinjer kan ses i beslutningslog for version 12.0.0.
Å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

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.

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-default">Datovælger</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-default">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Om denne komponent

Denne komponent består af flere Web Components, hvoraf nogle anvender light DOM, og andre anvender shadow DOM. Light DOM-elementer genererer HTML, der kan tilgås ligesom al anden HTML på siden, mens shadow DOM-elementer genererer indkapslet HTML og styling, som ikke bør tilgås. Det fremgår af hvert elements egen sektion herunder, hvilken af de to typer der er tale om.

For light DOM-elementer kan du 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.

Web Components med shadow DOM konfigureres gennem attributter og slots, når komponenten tillader indhold. Slots kan enten være navngivne, dvs. hvor attributten slot="navn" skal anvendes på det indhold, der tilføjes til webkomponenten, eller unavngivne.

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

Åbn eksempel i nyt vindue
Dette er en fejl
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-error">Datovælger med fejl</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-error" aria-describedby="error1" aria-invalid="true">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
    <fds-error-message id="error1">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-date-picker>

Hjælpetekst

Åbn eksempel i nyt vindue
Dette er en hjælpetekst
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-helptext">Datovælger med hjælpetekst</label>
    <fds-help-text id="help1" class="help-text">Dette er en hjælpetekst</fds-help-text>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-helptext" aria-describedby="help1">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Begræns mulige datoer

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-minmax">Datovælger med begrænsede datoer</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-minmax">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid min-date="2000-02-02" max-date="2000-02-20"></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Fast værdi

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-defaultdate">Datovælger med default dato</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-defaultdate">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid default-date="2028-09-05"></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Datoformat

Åbn eksempel i nyt vindue
Format sat til dd-mm-yyyy
Web Component Genereret HTML 
<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>
 
<fds-date-picker format="DD-MM-YYYY">
    <label for="ce-datepicker-example-format">Datovælger med nyt format</label>
    <fds-help-text id="help2" class="help-text">Format sat til dd-mm-yyyy</fds-help-text>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-format" aria-describedby="help2">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Deaktiveret

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<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>
 
<fds-date-picker>
    <label for="ce-datepicker-example-disabled" class="disabled">Datovælger</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-disabled" disabled="">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
</fds-date-picker>

Konfiguration

fds-date-picker kræver følgende struktur: Et label-element, en div indeholdende et input-element, samt en indre div med et fds-date-picker-grid-element.

fds-date-picker

fds-date-picker anvender light DOM.

Attributter

Attribut Beskrivelse
show-required-status Viser om inputfeltet er obligatorisk eller frivilligt baseret på required-attributten. Indsæt en tekst i attributten for at overskrive default-teksten.
format Angiv det datoformat, der vises i inputfeltet. Gyldige værdier er DD/MM/YYYY, DD-MM-YYYY, DD.MM.YYYY, DD MM YYYY og DD/MM-YYYY. Default er DD/MM/YYYY.
text-open Skærmlæsertekst for knappen, der åbner datovælgeren. Default er Åbn datovælger.
text-selecteddate Skærmlæsertekst for den valgte dato, tilføjet til knappens skærmlæsertekst. Skal indeholde DAY, MONTH og YEAR. Default er valgt dato er DAY. MONTH YEAR.
text-months Overskriv navnene på årets 12 måneder. Angives som 12 ord separeret med mellemrum. Default er januar februar marts april maj juni juli august september oktober november december.

Funktioner

Funktion Beskrivelse
open() Åbn datovælgeren.
close() Luk datovælgeren.
toggle() Skift mellem at åbne og lukke datovælgeren.

fds-date-picker-grid

fds-date-picker-grid anvender shadow DOM. Bemærk, at fds-date-picker-grid som udgangspunkt bruges inden i fds-date-picker og ikke er tiltænkt at blive brugt alene.

Attributter

Attribut Beskrivelse
min-date Angiv den tidligste valgbare dato. Angives i formatet YYYY-MM-DD. Default er dags dato.
max-date Angiv den seneste valgbare dato. Angives i formatet YYYY-MM-DD. Default er 10 år fra dags dato.
selected-date Angiv den valgte dato. Angives i formatet YYYY-MM-DD.
default-date Angiv den dato, kalenderen skal vise ved initialisering, hvis ingen dato er valgt. Angives i formatet YYYY-MM-DD. Ændringer efter initialisering har ingen effekt.
text-months Overskriv navnene på årets 12 måneder. Angives som 12 ord separeret med mellemrum. Default er januar februar marts april maj juni juli august september oktober november december.
text-days Overskriv navnene på ugens 7 dage. Angives som 7 ord separeret med mellemrum. Default er mandag tirsdag onsdag torsdag fredag lørdag søndag.
text-prevbutton Skærmlæsertekst for knappen, der viser den foregående måned.
text-nextbutton Skærmlæsertekst for knappen, der viser den næste måned.
text-date-announcement Skærmlæsertekst for hver dato i kalenderen. Skal indeholde DAY, MONTH og YEAR. Default er DAY. MONTH YEAR.
text-mindate Tilføjes til skærmlæserteksten for den tidligste valgbare dato. Default er tidligste valgbare dato.
text-maxdate Tilføjes til skærmlæserteksten for den seneste valgbare dato. Default er seneste valgbare dato.

Events

Event Beskrivelse
date-clicked Udløses når en dato i kalenderen klikkes eller vælges med tastaturet.
date-selected Udløses når den valgte dato ændres.

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.

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

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies