Stabil

DatePicker

DatePicker er en datovelger som viser en knapp med den valgte datoen formatert på norsk. Ved klikk åpnes en kalender-popover for å velge dato. Kombinerer Calendar og Popover med en trigger i samme boksstil som de andre skjemafeltene, i full bredde.

DatePicker støtter label og error som Input, og kobles automatisk til FormField. Med name sendes valgt dato med skjemaet i ISO-format (åååå-mm-dd) via et skjult inputfelt.

Utforsk

Forhåndsvisning

Dato

label

placeholder

error

disabled

<DatePicker label="Dato" placeholder="Velg dato" />

Importering

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

Grunnleggende bruk

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

Med forhåndsvalgt dato

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

Custom plassholder

function DatePickerPlaceholder() {
const [date, setDate] = React.useState(undefined);
return (
  <DatePicker
    value={date}
    onValueChange={setDate}
    placeholder="Velg fødselsdato"
  />
);
}

Med label, navn og feilmelding

function DatePickerLabel() {
const [date, setDate] = React.useState(undefined);
return (
  <div style={{ maxWidth: "20rem" }}>
    <DatePicker
      label="Dato"
      name="dato"
      required
      error={date ? undefined : "Velg en dato"}
      value={date}
      onValueChange={setDate}
    />
  </div>
);
}

Deaktivert

<DatePicker disabled placeholder="Ikke tilgjengelig" />

Med begrensede datoer

Bruk calendarProps for å sende props videre til Calendar-komponenten, for eksempel for å deaktivere helger eller datoer i fortiden.

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

Bruksanbefalinger

Fødselsdato: 13. mars 2026

Bruk for enkeltdatoer i skjemaer

DatePicker er ideell for skjemafelt der brukeren skal velge én dato, som fødselsdato eller startdato.

Fra: 1. mars → Til: 15. mars

Ikke bruk for datoperioder

For valg av en periode (fra–til) bør du bruke Calendar med mode='range' direkte, eller en egen DateRangePicker.

13. mars 2026

Formater datoen for brukeren

DatePicker viser datoen på norsk automatisk (f.eks. '13. mars 2026'). Brukeren trenger aldri å skrive inn datoen manuelt.

2026-03-13

Ikke bruk for kjent dato

Hvis brukeren allerede vet datoen (som et ordrenummer eller fakturadato), bruk et vanlig Input-felt i stedet.

Tilgjengelighet

Trigger-knappen er en standard <button> med synlig tekst
Kalender-popoveren åpnes med klikk eller Enter/Space
Full tastaturnavigasjon inne i kalenderen
Escape lukker popoveren og returnerer fokus til knappen
Valgt dato annonseres som knappetekst
Deaktivert tilstand kommuniseres via disabled-attributt
label-propen (eller en FormField med <Label>) gir triggeren et tilgjengelig navn, og error kobles via aria-describedby

Props

Prop	Type	Default	Beskrivelse
`value`	`Date`	—	Den valgte datoen
`onValueChange`	`(date: Date \| undefined) => void`	—	Kalles når brukeren velger en dato
`label`	`ReactNode`	—	Synlig label over feltet
`error`	`ReactNode`	—	Feilmelding under feltet
`name`	`string`	—	Navn for skjemainnsending. Valgt dato sendes i ISO-format (`åååå-mm-dd`) via et skjult felt
`placeholder`	`string`	`"Velg dato"`	Plassholdertekst når ingen dato er valgt
`disabled`	`boolean`	`false`	Deaktiver datovelgeren
`required`	`boolean`	`false`	Viser påkrevd-markering i labelen. Gir ingen nativ nettleser-validering siden triggeren er en knapp, ikke et skjemaelement
`className`	`string`	—	Ekstra CSS-klasser for trigger-knappen
`calendarProps`	`CalendarProps`	—	Props som sendes videre til Calendar

I tillegg sendes øvrige knappe-props (f.eks. id, aria-*) videre til triggeren.