@fremtind/jkl-datepicker-react

Se portalen for bruk og prinsipper.

Installasjon

Tips: stilpakken blir automatisk installert som en avhengighet.

1. npm i @fremtind/jkl-datepicker-react.
2. Importér både React-komponent og stilark i prosjektet ditt.

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";

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())}`,
        },
    })}
/>