Date input

[Rozerinay]

We willen graag meer leren over het Date input component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Date input

Doel

Invoerveld om een datum in te vullen met de mogelijkheden die de browser biedt.

Ook bekend als

Date

Gerelateerde componenten

Calendar, Date input group, Date picker

Onderzoek

Russ Weakley / What makes an accessible date picker? Is it even possible? - Inclusive Design 24
Video waarin wordt uitgelegd wat een date picker toegankelijk maakt en inzoomt op 3 verschillende Date pickers, waaronder de native Date picker.

37 ‘Date Picker’ Design Examples
Onderzoek toont aan dat wanneer de beschikbaarheid niet adequaat of accuraat wordt gecommuniceerd in de kalender, gebruikers extra tijd en moeite moeten besteden aan het verifiëren van deze informatie, wat leidt tot frustratie en teleurstelling – en mogelijke verlating.

input type ="date" - Mozilla
Informatie over input type="date", de standaard ingebouwde (native) Date input.

Redenen waarom GOV.UK geen gebruikmaakt van native date input - GOV.UK
Iemand van GOV.UK legt uit wat de redenen zijn waarom zij geen gebruik maken van de native Date input en Date picker.

Date and Time Pickers for All - Adobe Spectrum
Artikel waarin wordt aangegeven dat Adobe een Date picker heeft ontwikkeld met de nadruk op internationalisering, toegankelijkheid, flexibiliteit en aanpasbaarheid.

Is input type=”date” ready for use in accessible websites? - Hassell Inclusion
Artikel waarin wordt beschreven hoe input type="date" in HTML5, bedoeld om het invoeren van datums te vereenvoudigen en gebruikersfouten te verminderen, wordt ondersteund door browsers en ondersteunende technologieën, en hoe het de toegankelijkheid van formulieren beïnvloedt.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default
Standaard date input die gebruikers helpt om een datum in te voeren.

Invalid
Date input waarbij een foutmelding wordt getoond bij ongeldige invoer.

Disabled
Date input waarbij geen interactie mogelijk is.

Small container

Figma

Date input met de states default, hover, focus, error en disabled.
De date picker die te zien is, is enkel een voorbeeld. In de implementaties worden browser/OS default datepickers gebruikt voor een verhoogd gebruiksgemak en onderhoudsgemak.

---

Notities

• Input type ="date".
• Native Calendar aanwezig.
• Calendar wordt geactiveerd wanneer je de icon klikt.
• Date format: dd-mm-jjjj.
• In design wordt de stijl van de Date input wel overgenomen, maar voor de Date picker wordt enkel de juiste interactiekleur gebruikt.
• Input heeft een breedte die logisch is afgestemd op de verwachte invoer.
• Het is mogelijk om de input te wissen en de datum van vandaag aan te klikken.

Interactie

• Je kunt een datum invullen door op 'dd', 'mm' en 'jjjj' te klikken en vervolgens een getal in te voeren. Het is niet mogelijk om vrijuit een datum in te vullen.
• Als je een getal zoals 4 invult bij bijv. 'dd', dan wordt de meest rechter invoer als eerst ingevuld (dus: '04').
• Wanneer je een getal hebt ingevuld bij bijv. 'dd', dan word de focus automatisch gelegd op 'mm'.
• Bij 'jjjj' is het mogelijk om meer dan 4 karakters in te voeren. De Date input wordt invalid.
• Met backspace verwijder je de invoer voor 'dd', 'mm' en 'jjjj'. Je kunt niet de gehele invoer in één keer verwijderen.

[Rozerinay]

DSO Toolkit

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default
Standaard date input die gebruikers helpt om een datum in te voeren.

Disabled
Date input waarbij geen interactie mogelijk is.

Invalid
Date input waarbij een foutmelding wordt getoond bij ongeldige invoer.

With value
Date input waarbij een datum als waarde is ingevuld.

With min and max
Date input waarbij de maand en het jaar zijn vastgesteld en alleen kan worden gekozen voor een dag.

Month range
Date input waarbij een begin- en einddatum van een maand zijn vastgesteld om daarbinnen te kiezen.

With label
Date input met een label.

Narrow input
Date input waarbij de breedte van het veld is afgestemd op de invoer.

---

Notities

• Heet 'Date picker'.
• Input type="date".
• Native Calendar aanwezig.
• Calendar wordt geactiveerd wanneer je de icon klikt.
• Date format: dd-mm-jjjj.
• Input heeft een breedte die logisch is afgestemd op de verwachte invoer (narrow input) of de standaardbreedte behoudt (default).
• Bij de Disabled state is geen icon aanwezig.
• Het knopje om de modal voor het kiezen van een datum te openen heeft het aria-expanded attribuut en als label "kies datum", daaraan wordt "geselecteerde datum [datum]"' toegevoegd als al een datum is geselecteerd. Dit is bedoeld als extra hint voor de gebruiker.
• Heeft dezelfde interactie als bij Amsterdam (waar de interactie staat uitgeschreven).

[Rozerinay]

DUO

• Documentatie website

---

Screenshots / Varianten

Datepicker
De standaard datepicker wordt gebruikt voor het selecteren van één specifieke datum in de nabije toekomst of het recente verleden.

Datetimepicker
Gebruik de datetimepicker wanneer je de gebruiker vraagt een specifieke datum en tijd in te voeren.

Timepicker
Gebruik de timepicker wanneer je de gebruiker vraagt een specifieke tijd in te voeren.
(Deze wordt niet in elke browser ondersteund)

States

Uitgeschakeld veld

Veld met focus

Verkeerde invoer
Wanneer een gebruiker een verplichte vraag verkeerd of niet ingevuld heeft, tonen we een foutmelding.

---

Notities

• Heet 'Datepicker'.
• Datepicker heeft input type="date", Datetimepicker "datetime-local" en Timepicker "time".
• Native Calendar en Timepicker aanwezig.
• Calendar en Timepicker worden geactiveerd wanneer je op de button klikt.
• Date format: dd-mm-jjjj.
• Time format: --:--
• Input heeft een breedte die logisch is afgestemd op de verwachte invoer.
• Heeft dezelfde interactie als bij Amsterdam (waar de interactie staat uitgeschreven).
• Documentatie beschikbaar.

[Rozerinay]

OpenGemeenten

• Pattern Lab

---

Screenshots / Varianten

Date

Date description

Date error

Date required

Date value

---

Notities

• Heet 'Date'.
• Input type="date".
• Native Calendar aanwezig.
• Calendar wordt geactiveerd wanneer je op de icon klikt.
• Date format: dd-mm-jjjj.
• Input heeft een standaardbreedte.
• Heeft dezelfde interactie als bij Amsterdam (waar de interactie staat uitgeschreven).

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook
Default

Figma
Date input met de states default, disabled en invalid.

---

Notities

• Heet 'Date input field' op de documentatiewebsite en 'Date input' in Storybook'.
• Input type="date".
• Native Calendar aanwezig.
• Calendar wordt geactiveerd wanneer je op de icon klikt.
• Date format: dd-mm-jjjj.
• Heeft de mogelijkheid om de attributen value, min, max, step en size in te stellen.
• Input heeft een breedte die logisch is afgestemd op de verwachte invoer.
• Heeft dezelfde interactie als bij Amsterdam (waar de interactie staat uitgeschreven).

[sergei-maertens]

Open Formulieren (https://open-formulieren.github.io/open-forms-sdk/?path=/docs/pure-react-components-forms-datefield--docs) heeft twee varianten hiervan, waarvan ik de tweede niet zie, maar komt wel overeen met het GOV.uk artikel. Voor "bekende" datums zoals geboortedatums maken we gebruik van een "input group" zonder date picker, die laatste zit daar namelijk behoorlijk in de weg. Niet zo'n probleem met native type="data" inputs omdat je daar wel nog kan typen. Eén belangrijk verschil daar is dat de volgende van de elementen op basis van de locale verandert - US locale doet bijvoorbeeld mm-dd-yyyy

De custom datepicker wordt ook gebruikt om calendar-ranges/dagen uit te kunnen blocken, dat kan met native inputs niet.