Gå til sidens indhold

Vælg et tema

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


Kode

Datovælger

Eksempel på datovælger

Eksempler og retningslinjer

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);

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.

Varianter

Begræns mulige datoer

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>

Fast værdi

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>

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.

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>

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

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