15.2.11 • Published 8 months ago

@fremtind/jkl-datepicker-react v15.2.11

Weekly downloads
649
License
MIT
Repository
github
Last release
8 months ago

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

8 months ago

15.2.10

8 months ago

15.2.8

8 months ago

15.2.9

8 months ago

15.2.7

9 months ago

15.2.5

9 months ago

15.2.6

9 months ago

15.2.4

9 months ago

15.1.70

9 months ago

15.1.69

9 months ago

15.1.68

9 months ago

15.2.0

9 months ago

15.2.1

9 months ago

15.2.2

9 months ago

15.2.3

9 months ago

15.1.67

9 months ago

15.1.66

9 months ago

15.1.65

10 months ago

15.1.63

10 months ago

15.1.64

10 months ago

15.1.62

10 months ago

15.1.61

10 months ago

15.1.60

10 months ago

15.1.59

10 months ago

15.1.58

10 months ago

15.1.57

10 months ago

15.1.55-alpha.0

10 months ago

15.1.56

10 months ago

15.1.54

10 months ago

15.1.55

10 months ago

15.1.52

10 months ago

15.1.53

10 months ago

15.1.51

10 months ago

15.1.53-alpha.0

10 months ago

15.1.49

10 months ago

15.1.50

10 months ago

15.1.47

10 months ago

15.1.48

10 months ago

15.1.46

10 months ago

15.1.45

10 months ago

15.1.38

1 year ago

15.1.39

1 year ago

15.1.36

1 year ago

15.1.37

1 year ago

15.1.34

1 year ago

15.1.35

1 year ago

15.1.33

1 year ago

15.1.43

11 months ago

15.1.44

11 months ago

15.1.41

11 months ago

15.1.42

11 months ago

15.1.40

12 months ago

15.1.45-alpha.1

10 months ago

15.1.45-alpha.0

11 months ago

15.1.32

1 year ago

15.1.31

1 year ago

15.1.30

1 year ago

15.1.29

1 year ago

15.1.28

1 year ago

15.1.27

1 year ago

15.1.26

1 year ago

15.1.25

1 year ago

15.1.24

1 year ago

15.1.23

1 year ago

15.1.22

2 years ago

15.1.21

2 years ago

15.1.20

2 years ago

15.1.19

2 years ago

15.1.18

2 years ago

14.3.15

2 years ago

14.3.13

2 years ago

14.3.14

2 years ago

15.0.2

2 years ago

15.0.3

2 years ago

15.0.0

2 years ago

15.0.1

2 years ago

15.0.6

2 years ago

15.0.7

2 years ago

15.0.4

2 years ago

15.0.5

2 years ago

15.1.16

2 years ago

15.0.8

2 years ago

15.1.17

2 years ago

15.1.14

2 years ago

15.1.15

2 years ago

15.1.12

2 years ago

15.1.13

2 years ago

15.1.10

2 years ago

15.1.11

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.1.5

2 years ago

15.1.6

2 years ago

15.1.3

2 years ago

15.1.4

2 years ago

15.1.9

2 years ago

15.1.7

2 years ago

15.1.8

2 years ago

14.3.11

2 years ago

14.3.12

2 years ago

14.3.10

2 years ago

14.3.8

2 years ago

14.3.9

2 years ago

14.3.7

2 years ago

14.2.7

2 years ago

14.2.8

2 years ago

14.2.9

2 years ago

14.2.4

2 years ago

14.2.5

2 years ago

14.2.6

2 years ago

14.2.10

2 years ago

14.3.6

2 years ago

14.3.0

2 years ago

14.3.1

2 years ago

14.3.2

2 years ago

14.3.3

2 years ago

14.3.5

2 years ago

14.1.8

2 years ago

14.1.9

2 years ago

14.1.6

2 years ago

14.1.7

2 years ago

14.2.0

2 years ago

14.2.1

2 years ago

14.2.2

2 years ago

14.2.3

2 years ago

14.1.5

2 years ago

14.1.4

2 years ago

14.1.0

2 years ago

14.1.1

2 years ago

14.1.2

2 years ago

14.1.3

2 years ago

14.0.0

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.0.35

2 years ago

12.0.34

3 years ago

12.0.36

2 years ago

12.0.31

3 years ago

12.0.30

3 years ago

12.0.33

3 years ago

12.0.32

3 years ago

12.0.28

3 years ago

12.0.27

3 years ago

12.0.29

3 years ago

12.0.24

3 years ago

12.0.23

3 years ago

12.0.26

3 years ago

12.0.25

3 years ago

12.0.20

3 years ago

12.0.22

3 years ago

12.0.21

3 years ago

12.0.17

3 years ago

12.0.19

3 years ago

12.0.18

3 years ago

12.0.8

3 years ago

12.0.9

3 years ago

12.0.16

3 years ago

12.0.13

3 years ago

12.0.12

3 years ago

12.0.15

3 years ago

12.0.14

3 years ago

12.0.11

3 years ago

12.0.10

3 years ago

11.0.26

3 years ago

11.0.27

3 years ago

11.0.24

3 years ago

11.0.25

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.5

3 years ago

12.0.6

3 years ago

12.0.0

3 years ago

12.0.1

3 years ago

12.0.2

3 years ago

11.0.23

3 years ago

11.0.17

3 years ago

11.0.18

3 years ago

11.0.15

3 years ago

11.0.16

3 years ago

11.0.19

3 years ago

11.0.10

3 years ago

11.0.13

3 years ago

11.0.14

3 years ago

11.0.11

3 years ago

11.0.12

3 years ago

11.0.20

3 years ago

11.0.21

3 years ago

11.0.6

3 years ago

11.0.7

3 years ago

11.0.5

3 years ago

11.0.8

3 years ago

11.0.9

3 years ago

10.0.0

3 years ago

10.0.1

3 years ago

9.1.5

3 years ago

9.1.4

3 years ago

9.1.3

3 years ago

11.0.4

3 years ago

11.0.2

3 years ago

11.0.3

3 years ago

11.0.0

3 years ago

11.0.1

3 years ago

9.1.2

3 years ago

9.1.1

3 years ago

9.1.0

3 years ago

9.0.19

3 years ago

9.0.20

3 years ago

9.0.21

3 years ago

9.0.18

3 years ago

9.0.17

3 years ago

9.0.16

3 years ago

9.0.9

3 years ago

9.0.8

3 years ago

9.0.7

3 years ago

9.0.6

3 years ago

9.0.5

3 years ago

9.0.4

3 years ago

9.0.3

3 years ago

9.0.2

3 years ago

9.0.1

3 years ago

9.0.0

3 years ago

9.0.13

3 years ago

9.0.12

3 years ago

9.0.15

3 years ago

9.0.14

3 years ago

9.0.11

3 years ago

9.0.10

3 years ago

8.0.21

4 years ago

8.0.20

4 years ago

8.0.23

3 years ago

8.0.22

3 years ago

8.0.25

3 years ago

8.0.24

3 years ago

8.0.27

3 years ago

8.0.26

3 years ago

8.0.12

4 years ago

8.0.14

4 years ago

8.0.13

4 years ago

8.0.16

4 years ago

8.0.15

4 years ago

8.0.18

4 years ago

8.0.17

4 years ago

8.0.19

4 years ago

8.0.10

4 years ago

8.0.11

4 years ago

8.0.9

4 years ago

8.0.8

4 years ago

8.0.5

4 years ago

8.0.4

4 years ago

8.0.7

4 years ago

8.0.6

4 years ago

8.0.3

4 years ago

8.0.2

4 years ago

8.0.1

4 years ago

7.3.1

4 years ago

7.3.0

4 years ago

7.2.6

4 years ago

7.2.8

4 years ago

7.2.7

4 years ago

7.3.4

4 years ago

7.3.3

4 years ago

7.3.2

4 years ago

8.0.0

4 years ago

7.2.5

4 years ago

7.2.4

4 years ago

7.2.3

4 years ago

7.2.2

4 years ago

7.2.1

4 years ago

7.2.0

4 years ago

7.1.5

4 years ago

7.1.4

4 years ago

7.1.3

4 years ago

7.1.2

4 years ago

7.1.1

4 years ago

7.1.0

4 years ago

7.0.7

4 years ago

7.0.6

4 years ago

7.0.5

4 years ago

7.0.4

4 years ago

7.0.3

4 years ago

7.0.2

4 years ago

7.0.1

4 years ago

7.0.0

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.2.4

4 years ago

5.2.3

4 years ago

5.2.2

4 years ago

5.1.2

4 years ago

5.2.1

4 years ago

5.2.0

4 years ago

5.1.1

4 years ago

5.1.0

4 years ago

4.0.5

4 years ago

4.0.6

4 years ago

5.0.0

4 years ago

4.0.4

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.7.15

4 years ago

3.7.14

4 years ago

3.7.13

4 years ago

3.7.12

4 years ago

3.7.11

4 years ago

3.7.10

4 years ago

3.7.9

4 years ago

3.7.8

4 years ago

3.7.7

4 years ago

3.7.6

4 years ago

3.7.5

4 years ago

3.7.4

4 years ago

3.7.3

5 years ago

3.7.2

5 years ago

3.7.1

5 years ago

3.7.0

5 years ago

3.6.5

5 years ago

3.6.4

5 years ago

3.6.2

5 years ago

3.6.1

5 years ago

3.6.3

5 years ago

3.6.0

5 years ago

3.5.7

5 years ago

3.5.6

5 years ago

3.5.5

5 years ago

3.5.4

5 years ago

3.5.3

5 years ago

3.5.2

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.24

5 years ago

3.3.23

5 years ago

3.3.22

5 years ago

3.3.21

5 years ago

3.3.20

5 years ago

3.3.19

5 years ago

3.3.18

5 years ago

3.3.17

5 years ago

3.3.15

5 years ago

3.3.16

5 years ago

3.3.13

5 years ago

3.3.14

5 years ago

3.3.12

5 years ago

3.3.11

5 years ago

3.3.10

5 years ago

3.3.9

5 years ago

3.3.8

5 years ago

3.3.7

5 years ago

3.3.6

5 years ago

3.3.5

5 years ago

3.3.4

5 years ago

3.3.3

5 years ago

3.3.2

5 years ago

3.3.1

5 years ago

3.3.0

5 years ago

3.2.26

5 years ago

3.2.27

5 years ago

3.2.25

5 years ago

3.2.24

5 years ago

3.2.23

5 years ago

3.2.22

5 years ago

3.2.21

5 years ago

3.2.20

5 years ago

3.2.19

5 years ago

3.2.18

5 years ago

3.2.17

5 years ago

3.2.16

5 years ago

3.2.15

5 years ago

3.2.14

5 years ago

3.2.13

5 years ago

3.2.12

5 years ago

3.2.11

5 years ago

3.2.10

5 years ago

3.2.9

5 years ago

3.2.8

5 years ago

3.2.7

5 years ago

3.2.6

5 years ago

3.2.5

5 years ago

3.2.4

5 years ago

3.2.2

5 years ago

3.2.3

5 years ago

3.2.1

5 years ago

3.2.0

5 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.0

5 years ago

1.2.1

5 years ago

1.1.12

5 years ago

1.1.11

5 years ago

1.1.10

5 years ago

1.1.9

6 years ago

1.1.8

6 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-alpha.14

6 years ago

1.0.0-alpha.13

6 years ago

1.0.0-alpha.12

6 years ago

1.0.0-alpha.11

6 years ago

1.0.0-alpha.10

6 years ago

1.0.0-alpha.9

6 years ago

1.0.0-alpha.8

6 years ago

1.0.0-alpha.7

6 years ago

0.11.0

6 years ago

0.10.2

6 years ago

0.10.1

6 years ago

0.10.0

6 years ago

0.9.1-alpha.8

6 years ago

0.9.0

6 years ago

0.8.1-alpha.55

6 years ago

0.8.0

6 years ago

0.7.1

6 years ago

0.6.1

6 years ago

0.5.0

6 years ago

0.2.2-alpha.1

6 years ago

0.2.1-alpha.2

6 years ago