Hopp til innhold

Date­Picker

Datovelgeren gir brukerne mulighet til å skrive inn eller velge en dato. Ledeteksten beskriver hvilken dato brukeren skal fylle inn. To datovelgere kan brukes sammen for å angi perioder.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-datepicker-react
Bruk
import { DatePicker } from "@fremtind/jkl-datepicker-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-datepicker/datepicker.min.css";

import "@fremtind/jkl-icon-button/icon-button.min.css";

import "@fremtind/jkl-icons/icons.min.css";

import "@fremtind/jkl-input-group/input-group.min.css";



// For enkelte features må du også ha denne CSSen importert.

import "@fremtind/jkl-select/select.min.css";

import "@fremtind/jkl-text-input/text-input.min.css";

import "@fremtind/jkl-tooltip/tooltip.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-datepicker/datepicker";

@use "@fremtind/jkl-icon-button/icon-button";

@use "@fremtind/jkl-icons/icons";

@use "@fremtind/jkl-input-group/input-group";



@use "@fremtind/jkl-select/select";

@use "@fremtind/jkl-text-input/text-input";

@use "@fremtind/jkl-tooltip/tooltip";
React
Versjon
Dokumentasjon
Readme
Changelog
Migration

Live demo

DatePicker
Egenskaper
Variant
Visning
Tema
Tetthet
<DatePicker

  label="Velg startdato for forsikringen"

  labelProps={{ variant: 'small' }}

  errorLabel={

    false ? "Du kan ikke velge en dato som har vært" : undefined

  }

  helpLabel={

    false

      ? "Du vil være forsikret fra denne datoen"

      : undefined

  }

  tooltipProps={

    false

      ? {

          content:

            "Du vil være forsikret fra denne datoen. Du kan ikke velge en dato som har vært.",

        }

      : undefined

  }

/>

Bruk

Input og output fra DatePicker er først og fremst en string, det underliggende skjemafeltet er et tekstfelt. Formatet er dd.mm.yyyy. Komponenten gir også et ferdig Date-objekt dersom value er riktig formatert.

onChange får i tillegg et meta-objekt med verdiene error: "WRONG_FORMAT" | "OUTSIDE_LOWER_BOUND" | "OUTSIDE_UPPER_BOUND" og value: string. Du kan bruke error til å velge hvilken feilmeldingstekst du viser til brukeren og value om du ønsker å bruke inputfeltets verdi i feilmeldingen. Denne er lik event.target.value.

<DatePicker

  value={value}

  onChange={(e, date, meta) => {

    setValue(e.target.value);



    console.log("onChange", {

      event: e,

      date,

      meta,

    });

  }}

/>;

Komponenten er laget for å støtte react-hook-form. Et eksempel på bruk med register og validering ser du under. Du kan velge å ha komponenten i en Controller hvis du vil bruke meta-objektet i stedet.

import {

    DatePicker,

    formatInput,

    isCorrectFormat,

    isWithinUpperBound,

    isWithinLowerBound,

    parseDateString

} from "@fremtind/jkl-datepicker-react";

import { formatDate } from "@fremtind/jkl-formatters-util";



<DatePicker

    label="Fødselsdato"

    errorLabel={formState.errors.fodselsdato?.message}

    disableBefore="01.01.1970"

    disableAfter={formatInput(new Date())}

    {...register("fodselsdato", {

        required: "Du må fylle ut fødselsdato",

        validate: {

            isCorrectFormat: (v) =>

                isCorrectFormat(v) ||

                `Datoen må være skrevet i formen ${formatDate(new Date())} eller kortformat`,

            withinLowerBound: (v) =>

                isWithinLowerBound(v, parseDateString("01.01.1970") || "Datoen må være før 01.01.1970"",

            withinUpperBound: (v) =>

                isWithinUpperBound(v, new Date()) || `Datoen må være før ${formatDate(new Date())}`,

        },

    })}

/>

React API

Her finner du en oversikt over props på komponentene i pakken.