Datumveld voor afspraken: voorkom ongeldige keuzes

Begin met een inventaris voor je iets test. Een datumveld voor afspraken kent meer foutbronnen dan alleen een datum in het verleden. Maak voor jouw situatie een lijst met deze categorieën:

• Onmogelijke datums: 30 februari, 31 april of een dag die in een invoerveld met vrije tekst anders wordt gelezen (dag en maand omgedraaid).
• Gesloten dagen: vaste wekelijkse sluitingsdag, feestdagen, collectief verlof, eenmalige sluiting.
• Te vroeg of te laat: vandaag nog, terwijl je minstens een dag vooraf nodig hebt, of een datum ver buiten je agenda.
• Tijdzone en tijdstip: een datum die verschuift omdat de browser, de server en je agenda niet dezelfde zone gebruiken.
• Volzet: de dag is open, maar alle plaatsen zijn bezet.

Elke categorie krijgt later een eigen testgeval en een eigen boodschap. Zo weet je achteraf ook welke fout bezoekers het vaakst tegenkomen.

Doorloop dit stappenplan op een testomgeving of buiten openingsuren, zodat je geen echte afspraken aanmaakt.

1. Noteer de bron van waarheid: waar staan openingsuren, sluitingsdagen en capaciteit? In de website, in een agendatool of in iemands hoofd?
2. Controleer het invoertype. Een veld waarmee je een datum kiest, beperkt typefouten meer dan vrije tekst. Vrije tekst vraagt een duidelijk formaat en strengere controle.
3. Test per categorie uit de inventaris minstens één geldige en één ongeldige waarde, ook met het toetsenbord en op een smalle schermbreedte.
4. Test de serverkant apart. MDN beschrijft op de pagina over validatie in het formulier dat controle in de browser een eerste check is die de gebruiker snel helpt, maar dat je dezelfde gegevens ook op de server moet valideren. Een ongeldige datum die alleen door de browser wordt tegengehouden, kan nog altijd binnenkomen.
5. Vergelijk wat de bezoeker kiest, wat in de bevestigingsmail staat en wat in je agenda belandt. Alle drie moeten dezelfde dag tonen.
6. Noteer elk afwijkend resultaat met invoer, verwacht gedrag en werkelijk gedrag.

Niet elke ongeldige keuze verdient dezelfde reactie. Gebruik deze tabel als beslisblad en pas de uitkomst aan je eigen werking aan.

Regel: blokkeer wat zeker niet kan, leg uit wat onzeker is, en laat nooit een bezoeker in het ongewisse over de reden.

Een grijze dag zonder uitleg roept vragen op. De W3C-tutorial over toegankelijke formulieren vraagt om instructies bij velden en om meldingen die fouten benoemen en helpen oplossen. Vertaal dat naar je datumveld:

• Zet de regels vooraf bij het veld: openingsdagen, minimale termijn, gebruikte tijdzone.
• Koppel een foutmelding aan het veld zelf, in gewone taal. Niet 'ongeldige invoer', wel 'Op zondag zijn we gesloten. Kies een dag van maandag tot en met zaterdag.'
• Gebruik niet alleen kleur om een dag als niet beschikbaar aan te duiden. Voeg tekst toe.
• Bied direct een uitweg: het volgende vrije moment of een telefoonnummer.

Test dit met alleen het toetsenbord en met een schermlezer indien je die hebt. Wie de foutmelding niet hoort of ziet, kan de fout ook niet herstellen.

Stel: een zaak is op maandag en zondag gesloten, heeft op 1 januari verlof en vraagt minstens één volle dag vooraf. De agenda draait op lokale Belgische tijd. Dit is een fictief testdraaiboek, geen meting.

Overdrachtsnotitie voor wie het veld bouwt: de sluitingsregels staan op één plaats, de server controleert dezelfde regels als de browser, en de datum wordt als lokale datum van de locatie bewaard.

Herhaal na elke aanpassing aan openingsuren, plugin of formulier minstens de zes gevallen hierboven. Bekijk daarnaast een echte testboeking van begin tot einde: veld, melding, bevestigingsmail, agenda. Het web.dev-leertraject Forms bevat aparte onderdelen over testen op verschillende toestellen en platformen en over internationale datumformaten. Gebruik die als checklist-bron voor browsers en regio-instellingen die je zelf nog niet testte.

Let op de grenzen. Deze bronnen gaan over formulieren in het algemeen, niet over jouw boekingstool. Hoe je sluitingsdagen precies instelt, hangt af van die tool; de beheerder controleert dat in de eigen instellingen of bij de leverancier. Een test bewijst bovendien alleen de geteste combinaties.

Wil je weten welke publieke signalen je website rond formulieren en conversie toont, bekijk ze dan via Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt je eigen testprocedure niet.