<lm-date-field> – Dato-/tidsfelt / Date field

Om komponenten

Kanonisk navn: <lm-date-field>
Synonymer: datovelger, tidsvelger, date picker, datetime field, kalenderfelt
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="date"/"datetime-local"/"time"/"month"/"week">, som allerede gir en fullstendig, plattformtilpasset dato-/tidsvelger - ikke et eget APG-widgetmønster.
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker native dato-/tidsinput-typer internt, som gir en innebygd kalender-/klokkevelger på både desktop og mobil helt uten JS. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett og form-association.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--border-color, ...), var(--radius-small, ...), var(--opacity-muted, ...), var(--opacity-disabled, ...), var(--color-feil, ...), var(--font-liten, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

Én komponent for alle native dato-/tidstyper (date/datetime-local/time/month/week) via type-attributtet, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.

Egner seg for

Datoer, klokkeslett og datotid - reisedatoer, forfallsdatoer, avgangstider osv.
Måned- eller ukevalg (type="month"/"week") for periodebaserte skjemaer.

Egner seg ikke for

Fritekst som tilfeldigvis inneholder tall/datoer - bruk <lm-text-field>.
Et tidsintervall/varighet mellom to datoer i ett felt - bruk to <lm-date-field> ved siden av hverandre.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/date-field/date-field.js"></script>

<lm-date-field name="start" label="Startdato" required></lm-date-field>
<lm-date-field name="avgang" type="datetime-local" label="Avgangstid"></lm-date-field>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst.
`type`	`"date" \| "datetime-local" \| "time" \| "month" \| "week"`	"date"	Attributt. Videresendes direkte til det interne `<input type="...">` - gir riktig native kalender-/klokke-/måned-/ukevelger på tvers av plattformer.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`value`	`string`		Attributt/property. Feltets gjeldende verdi i det formatet native `type` krever (f.eks. "2026-03-01"). Bruk `valueAsDate`-propertyen for et ekte `Date`-objekt.
`min`	`string`		Attributt. Videresendes til det interne feltet.
`max`	`string`		Attributt. Videresendes til det interne feltet.
`step`	`number`		Attributt. Videresendes til det interne feltet (f.eks. sekund-steg for `type="time"`).
`required`	`boolean`	false	Attributt/property. Gjør feltet obligatorisk og legger til en stjerne i etiketten.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet (arves også automatisk fra en `<fieldset disabled>`).
`readonly`	`boolean`	false	Attributt. Videresendes til det interne feltet.
`help`	`string`		Attributt. Kort hjelpetekst vist under feltet, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`etikett`	Det omsluttende `<label>`-elementet.
`etikett-tekst`	`<span>`-en med selve etikett-teksten.
`felt`	Det interne `<input>`-elementet.
`hjelpetekst`	`<small>`-elementet med hjelpeteksten.
`feilmelding`	`<small role="alert">`-elementet med valideringsmeldingen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-date-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

lm-date-field::part(etikett-tekst) {
    /* egne stiler for "`<span>`-en med selve etikett-teksten." */
}

lm-date-field::part(felt) {
    /* egne stiler for "Det interne `<input>`-elementet." */
}

lm-date-field::part(hjelpetekst) {
    /* egne stiler for "`<small>`-elementet med hjelpeteksten." */
}

lm-date-field::part(feilmelding) {
    /* egne stiler for "`<small role="alert">`-elementet med valideringsmeldingen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`checkValidity()`	-		Videresender til den interne `ElementInternals.checkValidity()`.
`reportValidity()`	-		Videresender til den interne `ElementInternals.reportValidity()`.

Tilgjengelighet

Samme etikett-/hjelpetekst-/feilmeldingsoppsett som <lm-text-field>. Selve dato-/tidsvelgeren (kalender-popupen) er nettleserens egen, native implementasjon med innebygd tilgjengelighetsstøtte.

Samme <label>/aria-describedby-oppsett som <lm-text-field>.
Kalender-/klokke-/måned-/ukevelgeren er nettleserens egen, native UI.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt som en ISO-formatert streng.
valueAsDate-propertyen gir/tar imot et ekte Date-objekt, slik at forbrukerkode slipper manuell streng-parsing.

Referanser

Se også:

../text-field/index.html - samme oppsett for fritekst.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: designsystem/komponenter/skjema/skjema-felt-delt.css, designsystem/komponenter/skjema/skjema-felt-delt.js