Date Input Group

[Rozerinay]

We willen graag meer leren over het Date Input Group 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 Group

Doel

Formulierveld voor een datum die de gebruiker al weet of die van bekende gegevens overgenomen kan worden.

Ook bekend als

Date Input

Gerelateerde componenten

Calendar, Date Input, Date Picker, Input Group

Onderzoek

Date Input component - GOV.UK
Date Input component zoals beschikbaar bij GOV.UK.

Date Input Github Discussion - GOV.UK
In deze Discussion van GOV.UK wordt het Date Input component besproken. Er wordt onder andere vermeld dat er gebruikers zijn die de naam van de maand (janunari of JAN) invullen in plaats van het nummer (1). Er wordt ook geschreven waarom er niet voor 1 veld (eventueel met 'mask'), en auto-tab is gekozen.

Designing Birthday Picker UX: Simpler Is Better - Smashing magazine
Artikel waarin wordt beschreven waarom Date Input en Date Pickers voor frustratie kunnen zorgen voor een geboortedatum.

Format the “Expiration Date” Fields Exactly the Same as the Physical Credit Card - Baymard
Artikel waarin wordt beschreven wat de beste manier is om de vervaldatum van een creditcard uit te vragen.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Filled + Focus

Invalid

---

Notities

• Binnen een fieldset met legend.
• CSS class van groep invulvelden is input__control-group.
• CSS class van enkel invulveld binnen deze groep is input__control-container.
• Invulvelden voor de data zijn op basis van type="number".
• Opvallend is dat 'Dag' min="1", max="31" en [maxlength="2"](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) als toevoeging heeft, maar dat deze niet lijken te werken?
• Opvallend is dat in Firefox (Mac) er stepper controls binnen het invulveld bij komen omdat deze van het type 'number' zijn. Deze nemen dusdanig veel ruimte in dat de ingevoerde data niet goed zichtbaar is. Dit is wel te verhelpen.

[jeffreylauwers]

Open Formulieren

Storybook

---

Screenshots / Varianten

Storybook

Default

Filled + Focus

Invalid

Value normalizes to ISO-8601

---

Notities

• Binnen een fieldset met legend (met daarbinnen weer een label?).
• CSS class van groep invulvelden is openforms-input-group.
• CSS class van enkel invulveld binnen deze groep is openforms-input-group__item.
• Invulvelden zelf zijn op basis van type="text" met `inputmode="numeric".
• Geen maxlength toevoeging.
• Er is een ISO 8601 story beschikbaar.

[Rubenoo]

Wij gebruiken dit bij https://rni-webform.rvig.nl/nl

Bij het openen van de date input wordt automatisch de standaard datumkiezer van de browser gebruikt.

In het verleden hebben we veel tijd geïnvesteerd in het ontwikkelen van een aangepaste datuminvoer op basis van de MUI datepicker, waarbij de maand voluit geschreven moest worden. Dit deden we om verwarring te voorkomen tussen verschillende datumnotaties (DDMMJJJJ en MMDDJJJJ).
Echter, de technische implementatie voor alle ondersteunde talen (15 in totaal) bleek zeer complex. Bovendien bleek uit gebruikersonderzoek dat deze oplossing niet gebruiksvriendelijk was. Daarom zijn we teruggekeerd naar de standaard datuminvoer (input type=date).

[jeffreylauwers]

Bedankt voor je bijdrage! Deze vorm komt overeen met de Date Input component, daar zijn we de Date Input - Github Discussion voor gestart.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Date Input Group op het Community bord