DatePicker

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.

Eksempler Bruk Kode

Prinsipper

Velg størrelse på ledeteksten etter prinsippene for skjemadesign. Bruk en kort og tydelig ledetekst, som forteller hva brukeren skal velge. Hvis det trengs, kan du også gi mer forklaring med en hjelpetekst under feltet.

Når skal du bruke datepicker

Bruk datovelgeren når du vil be om en spesifikk dato. Datoen kan skrives inn eller velges fra en kalender.

Vi kan også bruke to datovelgere, når vi vil at brukeren skal angi en periode med fra- og tildato. For eksempel "Hvor lenge var du syk da du var på ferie? Velg dato fra og til".

Validering

Hvis datovelgeren ikke validerer, vises en feilmelding, som forteller hva som er galt. Merk at feilmeldingen erstatter en eventuell hjelpetekst, slik at den feilmeldingen du lager også må fortelle hva hjelpeteksten var.

Riktig

Hjelpetekst i feilmelding

Feil

Feilmelding uten hjelp

Demo

Skjemavalidering

Visning

Tema

Light

Dark

Tetthet

Default

Compact

const Skjemavalideringseksempel = () => {
  const { formState, handleSubmit, register } = useForm({
    shouldFocusError: false,
  });

  /** Gjør klar props til oppsummeringen */
  const { errors: hookFormErrors, isSubmitted, isValid } = formState;
  const errors = Object.entries(hookFormErrors).flatMap(([, error]) =>
    Array.isArray(error) ? error.map((e) => e.message) : [error.message]
  );

  /**
   * Gjør klart skjemaet for scrolling til oppsummeringen av feil. Sørg for at
   * skjemaet får en fornuftig scroll-padding-top slik at alt blir synlig med
   * tilstrekkelig luft.
   *
   * https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
   */
  const scrollRef = React.useRef(null);
  const [scrollToErrorSummary] = useScrollIntoView({
    ref: scrollRef,
    autoScroll: false,
  });

  const onError = () => {
    scrollToErrorSummary();
    scrollRef.current?.focus();
  };

  const onSubmit = (formData) => console.table(formData);

  return (
    <div className="jkl-spacing-40--bottom">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <div
          className="jkl-portal-scroll-anchor"
          tabIndex={-1} // Negativ TabIndex trengs for å kunne flytte fokus til elementet, så neste Tab går til første skjemafelt
          ref={scrollRef}
        />
        <FormErrorMessageBox
          className="jkl-portal-paragraph"
          errors={errors}
          isSubmitted={isSubmitted}
          isValid={isValid}
        />
        <p className="heading-4 jkl-spacing-16--bottom">
          Hvem er eier av forsikringen?
        </p>
        <TextInput
          {...register("fodselsnummer", {
            required: "Du må fylle ut eierens fødselsnummer",
            pattern: {
              value: /^\d{11}$/,
              message: "Fødselsnummeret må bestå av 11 siffer",
            },
          })}
          className="jkl-spacing-24--bottom"
          label="Fødselsnummer"
          errorLabel={formState.errors.fodselsnummer?.message}
        />
        <TextInput
          {...register("fornavn", {
            required: "Du må fylle ut eierens fornavn",
          })}
          className="jkl-spacing-24--bottom"
          autoComplete="given-name"
          label="Fornavn"
          errorLabel={formState.errors.fornavn?.message}
        />
        <TextInput
          {...register("etternavn", {
            required: "Du må fylle ut eierens etternavn",
          })}
          className="jkl-spacing-24--bottom"
          autoComplete="family-name"
          label="Etternavn"
          errorLabel={formState.errors.etternavn?.message}
        />
        <DatePicker
          className="jkl-spacing-24--bottom"
          disableAfterDate={formatInput(new Date())}
          errorLabel={formState.errors.fodselsdato?.message}
          label="Fødselsdato"
          {...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`,
              withinUpperBound: (v) =>
                isWithinUpperBound(v, new Date()) ||
                `Datoen må være før ${formatDate(new Date())}`,
            },
          })}
        />
        <Select
          {...register("stilling", {
            required: "Du må oppgi eierens stilling",
          })}
          className="jkl-spacing-40--bottom"
          errorLabel={formState.errors.stilling?.message}
          items={["Designer", "Utvikler", "Tester", "Leder", "Annet"]}
          label="Stilling"
          width="14rem"
        />
        <RadioButtonGroup
          className="jkl-spacing-24--bottom"
          labelProps={{ variant: "small" }}
          legend="Under 23"
          errorLabel={formState.errors.u23?.message}
        >
          <RadioButton
            {...register("u23", {
              required: "Du må oppgi om eier er under 23 år gammel",
            })}
            label="Ja"
            value="y"
          />
          <RadioButton
            {...register("u23", {
              required: "Du må oppgi om eier er under 23 år gammel",
            })}
            label="Nei"
            value="n"
          />
        </RadioButtonGroup>
        <FieldGroup
          legend="Er klient"
          className="jkl-spacing-40--bottom"
          labelProps={{ variant: "small" }}
          errorLabel={formState.errors.klient?.message}
        >
          <Checkbox {...register("klient")} value="ja">
            Ja
          </Checkbox>
        </FieldGroup>
        <PrimaryButton type="submit">Gå videre</PrimaryButton>
      </form>
    </div>
  );
};

return <Skjemavalideringseksempel />;

Date­Picker

Prinsipper

Når skal du bruke datepicker

Validering

Demo

DatePicker