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.
Testing
Dersom dere skal skrive tester 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");
Om dere bruker data-testid for å hente ut elementer i testene, vil attributten videresendes til selve skjemaelementet. Dersom dere heller ønsker å bruke data-testid på elementet <pkt-datepicker>, må dere sette attributten skipForwardTestid på elementet.