DatePicker

Bruk DatePicker når

• DatePicker brukes når brukeren skal velge en spesifikk dato, eventuelt med tidspunkt. Komponenten egner seg godt for skjemaer der datoen er en sentral del av flyten, som billettbestilling, bookinger eller rapportering.

Unngå DatePicker når

• brukeren skal velge en periode (fra- og til-dato), bruk RangeCalendar i stedet
• du vil ha en alltid synlig kalender uten inputfelt, bruk Calendar i stedet

Retningslinjer

DatePicker vs DateField

Bruk DatePicker når brukeren trenger visuell støtte fra en kalender for å velge dato. Bruk DateField alene dersom brukeren kjenner datoen de skal skrive inn (f.eks. fødselsdato), og ikke har behov for kalendervisning.

DatePicker vs NativeDatePicker

Ønsker man en OS-spesifikk opplevelse kan man bruke NativeDatePicker. Denne bruker operativsystemets innebygde datovalg og egner seg best for enkle tilfeller der man ønsker kjent mobilopplevelse.

Dato med tidspunkt

Tidspunkt kan legges til på to måter: enten direkte i DatePicker, eller som en separat TimePicker ved siden av. I løsninger ut mot vanlige sluttbrukere er en separat dato- og tidvelger foretrukket — det gir en tydeligere flyt.

Bruk på mobile enheter

På smale skjermer (under 1000px) vises kalenderen i en modal i stedet for en popover, slik at hele datovelgeren alltid er synlig. Denne oppførselen kan slås av — se Kode-fanen for detaljer.

Validering

Begrens tilgjengelige datoer slik at brukeren ikke kan velge ugyldige datoer. Du kan sette et tidligste og seneste gyldig dato, eller markere spesifikke datoer som utilgjengelige (f.eks. helger). Gi tydelig tilbakemelding når en ugyldig dato er valgt. Se Kode-fanen for ulike valideringsmetoder.

Eksempler

() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <DatePicker
      label="Dato"
      selectedDate={date}
      onChange={date => setDate(date)}
      locale="nb-NO"
    />
  );
}

<NativeDatePicker
  label="Fødselsdato"
  style={{ width: '15rem' }}
  value="1997-07-10"
/>

() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <DatePicker
      label="Velg dato og tid"
      selectedDate={date}
      onChange={setDate}
      locale="nb-NO"
      granularity="minute"
    />
  );
}

() => {
  const [dateTime, setDateTime] = React.useState(null);
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <DatePicker
        label="Dato"
        selectedDate={dateTime}
        onChange={setDateTime}
        locale="nb-NO"
      />
      <TimePicker
        label="Tid"
        selectedTime={dateTime}
        onChange={setDateTime}
        locale="nb-NO"
      />
    </div>
  );
}

() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <DatePicker
      label="Velg dato"
      selectedDate={date}
      onChange={setDate}
      locale="nb-NO"
      isDateUnavailable={date => isWeekend(date, 'nb-NO')}
      validationFeedback="Valgt dato kan ikke være en helgedag"
    />
  );
}