Gedaan met laden. U bevindt zich op: Datum Formulieren

Datum

De documentatie van het Design System is nog in bèta en wordt stapsgewijs aangevuld.

Voorstel tot generieke aanpak voor het invoeren van datums overheen het digitale landschap van de Vlaamse Overheid.

Instructies voor het invoeren van data

  1. Uniform formaat: Gebruik een input pattern of input mask om het datumformaat te standaardiseren. Hiermee zorg je ervoor dat, ongeacht hoe de gebruiker de datum invoert, het wordt omgezet naar één consistent formaat: dd.mm.jjjj.

  2. Flexibele invoermogelijkheden: Sta verschillende formaten toe bij de invoer. Dit maakt het voor gebruikers makkelijker om een datum in te voeren op een manier die hen het beste ligt. Ondersteunde formaten kunnen zijn:

    • dd.mm.jjjj (bijvoorbeeld: 25.12.2023)
    • dd/mm/jjjj (bijvoorbeeld: 25/12/2023)
    • dd mm jjjj (bijvoorbeeld: 25 12 2023)
  3. Automatische conversie: Zodra een gebruiker de datum invoert, zet het formulier deze automatisch om naar het gewenste formaat dd.mm.jjjj. Dit zorgt voor consistentie en voorkomt invoerfouten.

Aanvullende tips

  1. Datepicker add-on:
    • Integreer een datumkiezer (datepicker) voor een visueel overzicht van datums. Dit is vooral handig in browsers en mobiele apps, zodat gebruikers een datum kunnen selecteren zonder het exacte formaat zelf in te typen.
  2. Gebruik een placeholder:
    • Voeg een placeholder toe in het datumveld, bijvoorbeeld ‘dd.mm.jjjj’, om gebruikers duidelijk te laten zien in welk formaat ze de datum moeten invoeren.

Benut het label en de annotation boven het invoerveld

  • Voeg een label toe
    • Zorg voor een duidelijk label, zoals “Geboortedatum” of “Invoerdatum,” zodat de gebruiker weet welke datum hij moet invullen.
  • Voeg een toelichting over het formaat toe (Annotation):
    • Voeg een korte uitleg toe onder of naast het datumveld, waarin je aangeeft welk formaat gewenst is. Bijvoorbeeld: “Voer de datum in als dd.mm.jjjj”.
    Don't
    • Geen label
    • Geen annotatie
    Do
    • Benut het label
    • Benut de annotatie (met een voorbeeld van verwachte input)
    • Datepicker als input add-on
    • Gebruik ook een datum input mask/pattern

    Datums weergeven (statische data)

    Wanneer je een datum weergeeft, en dat de gebruiker hiermee niet kan interageren, raden we aan de maand voluit te schrijven indien mogelijk. Dit om toegankelijkheidsredenen: Het is makkelijker om een maand voluit te lezen zoals ze is, dan te moeten gaan nadenken of tellen van “Welke maand is de maand 7 nu weer?”