Skip to main content

Date picker

Date pickers laten gebruikers een datum kiezen uit een visuele kalender.

Richtlijnen

Gebruik datum en tijd prikkers als je een gebruiker vraagt een datum of tijd te kiezen. Als de datum gemakkelijk kan worden onthouden en ingetypt, gebruik dan een simpele tekst input in plaats van deze complexe date picker component.

Gebruik de kalender prikker wanneer de gebruiker de relatie tussen de in te voeren datum en andere dagen moet kunnen zien of als een datum variabel kan zijn. Het geeft de gebruiker de kans om zowel een visuele keuze te maken uit een kalender of handmatig de datum in te voeren.

Anatomie

  1. Label: beschrijft wat de gebruiker kan doen met de component
  2. Datum veld: een text input waar de gebruiker handmatig de datum in kan voeren.
  3. Icoon: dit kalender icoon geeft aan dat een kalender menu beschikbaar is.
  4. Kalender: menu waar een datum kan worden geselecteerd
  5. Jaar besturing: stelt de gebruiker in staat om door eerdere en toekomstige tijdspanne te navigeren
  6. Maand besturing: stelt de gebruiker in staat om per maand voor of achteruit in tijd te gaan
  7. Weekdag: dagen in de week
  8. Dag: dagen in een maand

(Interactive) states

De date picker heeft inactive, active, hover, disabled en focus statussen.

Toegankelijkheid

Sommige gebruikers kunnen moeite hebben met de interactie die nodig is om met een date picker een datum te kiezen. Wanneer een date picker component wordt gebruikt, geef gebruikers dan altijd de optie om de datum ook met een simpel tekst veld in te voeren.

Datepicker

status: community

Heb je hem succesvol ingezet voor jouw project met jouw huisstijl? Laat ons dit weten, misschien kan dit component dan opgenomen worden in NL Design System.