DatePicker

Kildekode på GitHub · Les som Markdown

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, Popover og Button.

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

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

Props

Prop	Type	Default	Beskrivelse
`value`	`Date`	—	Den valgte datoen
`onValueChange`	`(date: Date \| undefined) => void`	—	Kalles når brukeren velger en dato
`placeholder`	`string`	`"Velg dato"`	Plassholdertekst når ingen dato er valgt
`disabled`	`boolean`	`false`	Deaktiver datovelgeren
`className`	`string`	—	Ekstra CSS-klasser for trigger-knappen
`calendarProps`	`CalendarProps`	—	Props som sendes videre til Calendar