@fremtind/jkl-datepicker-react NPM | npm.io

15.2.11 • Published 9 months ago

Install

Weekly downloads

649

License

MIT

Repository

Last release

9 months ago

`@fremtind/jkl-datepicker-react`

Se portalen for bruk og prinsipper.

Installasjon

Tips: stilpakken blir automatisk installert som en avhengighet.

npm i @fremtind/jkl-datepicker-react.
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";
import "@fremtind/jkl-popover/popover.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-popover/popover";

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

datepicker jøkul fremtind

@fremtind/jkl-core @fremtind/jkl-datepicker @fremtind/jkl-icon-button-react @fremtind/jkl-icons-react @fremtind/jkl-input-group-react @fremtind/jkl-popover-react @fremtind/jkl-react-hooks @fremtind/jkl-select-react @fremtind/jkl-text-input-react classnames date-fns

@infinitebrahmanuniverse/nolb-_fre @everything-registry/sub-chunk-342 @zalastax/nolb-_fre

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

15.1.55-alpha.0

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

15.1.53-alpha.0

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

11 months ago

12 months ago

12 months ago

1 year ago

15.1.45-alpha.1

11 months ago

15.1.45-alpha.0

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago