DateInput

Kildekode på GitHub · Les som Markdown

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.

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"
  />
);
}

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

Koble alltid DateInput til en label via id/htmlFor for god tilgjengelighet.

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"
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
`placeholder`	`string`	`"dd.mm.åååå"`	Plassholdertekst for inputfeltet
`disabled`	`boolean`	`false`	Deaktiver datovelgeren
`className`	`string`	—	Ekstra CSS-klasser for container-elementet
`calendarProps`	`CalendarProps`	—	Props som sendes videre til Calendar