Datepicker

Datepicker med valg av kun én dato er funksjonelt lik <input type="date">, mens datepicker for valg av periode eller flere datoer er en mer kompleks komponent som returnerer datoer i en array av ISO-formatterte datostrenger.

Komponentbygger

Her kan du teste ut alle egenskapene til Datepicker, og få ferdig kode for React og custom element.

Hvordan ta i bruk?

// React
import { PktDatepicker } from "@oslokommune/punkt-react";

// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-datepicker.js";

// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-datepicker.js"></script>;

Bruk i skjema

For skjemaer fungerer Datepicker nær identisk med <select>. For én dato sendes én verdi ut i skjemaet (som vanlig select), og for flere datoer sendes flere datoer ut (som select multiple).

Hendelseshåndtering

Datepicker for én enkel dato har en change-hendelse som sendes ut når ny dato velges (onChange i React). Denne er en “standard” hendelse som sendes ut fra alle input-elementer, som returnerer en Event med target.value som inneholder datoen.

For Datepicker med flere datoer, enten som periode eller frittstående datoer, bør man bruke hendelsen value-change (onValueChange i React). Denne hendelsen sender ut en CustomEvent med detail som inneholder en array av datostrenger.

Polyfill for ElementInternals

Datepicker støtter ElementInternals for å kunne brukes i skjemaer. Dette er en del av Web Components standarden, og er foreløpig ikke støttet i alle nettlesere. For å bruke Datepicker i skjemaer i nettlesere som ikke støtter ElementInternals, kan polyfillen elements-internals-polyfill brukes. Dette gjelder hovedsakelig for eldre Safari-versjoner.

Enhetstesting / unit testing

Dersom dere skal skrive enhetstester med JSDOM eller liknende, er det viktig at dere lar komponenten bli rendret ferdig før dere tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-datepicker");

Det vil også sannsynligvis være nødvendig å ta i bruk den ovennevnte polyfillen for ElementInternals i testene for å kunne teste skjemafunksjonaliteten.