Stabil

DateInput

DateInput er en datovelger der brukeren kan skrive inn datoen direkte i et tekstfelt (dd.mm.åååå) eller velge fra en kalender-popover. Viser den valgte datoen i lesbart norsk format under inputfeltet.

DateInput støtter de samme propsene som Input — blant annet label, error, name, id og aria-* — og kobles automatisk til FormField.

Utforsk

Forhåndsvisning

Startdato

label

error

required

disabled

<DateInput label="Startdato" />

Importering

import { DateInput } from "@kilden/designsystem";

Grunnleggende bruk

function DateInputDemo() {
const [date, setDate] = React.useState(undefined);
return (
  <DateInput
    value={date}
    onValueChange={setDate}
  />
);
}

Med forhåndsvalgt dato

function DateInputPreselected() {
const [date, setDate] = React.useState(new Date());
return (
  <DateInput
    value={date}
    onValueChange={setDate}
  />
);
}

Custom plassholder

function DateInputPlaceholder() {
const [date, setDate] = React.useState(undefined);
return (
  <DateInput
    value={date}
    onValueChange={setDate}
    placeholder="Fødselsdato"
  />
);
}

Med label og feilmelding

function DateInputLabel() {
const [date, setDate] = React.useState(undefined);
return (
  <DateInput
    label="Startdato"
    name="startdato"
    required
    error={date ? undefined : "Velg en startdato"}
    value={date}
    onValueChange={setDate}
  />
);
}

Deaktivert

<DateInput disabled />

Med begrensede datoer

Bruk calendarProps for å sende props videre til Calendar-komponenten.

function DateInputConstrained() {
const [date, setDate] = React.useState(undefined);
return (
  <DateInput
    value={date}
    onValueChange={setDate}
    calendarProps={{
      disabled: [
        { dayOfWeek: [0, 6] },
        { before: new Date() },
      ],
    }}
  />
);
}

Bruksanbefalinger

Fødselsdato: 13.03.1990

Bruk når brukeren kjenner datoen

DateInput er ideell når brukeren sannsynligvis vet datoen og vil skrive den inn direkte, men også kan bruke kalenderen som støtte.

Neste ledige time: ???

Ikke bruk når datoen er ukjent

Hvis brukeren må bla i kalenderen for å finne riktig dato (f.eks. neste ledige time), bruk DatePicker eller Calendar direkte.

Startdato

01.04.2026

Bruk i skjemaer med label

Gi alltid DateInput en label — via label-propen eller en FormField med Label.

01.04.2026 – 15.04.2026

Ikke bruk for datoperioder

For valg av en periode (fra–til) bør du bruke to separate DateInput-felt eller Calendar med mode='range'.

Tilgjengelighet

Inputfeltet støtter direkte tastaturinntasting med inputMode="numeric"
label-propen (eller en FormField med <Label>) kobler label til inputfeltet
error-propen setter aria-invalid og kobler feilmelding via aria-describedby
Kalender-knappen har aria-label="Åpne kalender"
Full tastaturnavigasjon inne i kalenderen
Escape lukker popoveren og returnerer fokus
Deaktivert tilstand kommuniseres via disabled-attributt på både input og knapp
Lesbar dato under feltet gir visuell bekreftelse på tolket verdi

Props

Prop	Type	Default	Beskrivelse
`value`	`Date`	—	Den valgte datoen
`onValueChange`	`(date: Date \| undefined) => void`	—	Kalles når datoen endres
`label`	`ReactNode`	—	Synlig label over feltet
`error`	`ReactNode`	—	Feilmelding under feltet
`name`	`string`	—	Navn for skjemainnsending (verdi: dd.mm.åååå)
`placeholder`	`string`	`"dd.mm.åååå"`	Plassholdertekst for inputfeltet
`disabled`	`boolean`	`false`	Deaktiver datovelgeren
`required`	`boolean`	`false`	Marker som påkrevd
`className`	`string`	—	Ekstra CSS-klasser for container-elementet
`calendarProps`	`CalendarProps`	—	Props som sendes videre til Calendar

I tillegg sendes øvrige input-props (f.eks. id, aria-*, onBlur) videre til inputfeltet.