Le formulaire de pré-inscription de l’école Saint-Laud avait un bug de calendrier

Sophie gère le site internet de l’école Saint-Laud à Angers. Leur formulaire de pré-inscription en ligne a un champ « Date de naissance » en <input type="date"> HTML5 classique.

En creusant un signalement de parent, j’ai trouvé la ligne responsable :

<input type="date" name="e<?php echo $i; ?>_date"
       min="2011-01-01" max="2023-12-31">

Une date maximale codée en dur à 2023. Le calendrier d’un champ date s’ouvre toujours sur sa borne haute : résultat, le sélecteur s’affichait bloqué en 2023, des années après que la borne ait cessé d’avoir un sens.

Le correctif calcule la plage à chaque chargement de page, au lieu de la figer :

min="<?php echo (date('Y') - 12) . '-01-01'; ?>"
max="<?php echo date('Y') . '-12-31'; ?>"

Même largeur de plage qu’avant (treize ans), mais calculée dynamiquement : elle ne redeviendra plus jamais obsolète.

Au passage, j’en ai profité pour deux corrections de confort sur mobile, qui n’avaient jamais été traitées sur ce formulaire :

• aucun champ n’avait de font-size explicite, ce qui fait zoomer automatiquement Safari iOS dès qu’on touche un champ sous les 16 pixels ;
• la mise en page était en deux colonnes fixes, sans aucune règle @media dans toute la feuille de style : sur petit écran, le champ date se retrouvait écrasé sur la moitié de la largeur.

Les deux sont corrigés : 16 px partout, et une colonne unique sous 600 px de large. Testé et confirmé sur iPhone, Android et PC.

Un point qui mérite d’être noté : comme ce champ reste un <input type="date"> natif, et non un calendrier maison en JavaScript, c’est le système d’exploitation du téléphone qui fournit le sélecteur, pas le site. Sur iOS, Safari ouvre la roue de dates native d’iOS ; sur Android, Chrome ouvre la boîte de dialogue Material native du système. Le site ne dessine rien lui-même : il se contente de demander une date, et chaque OS répond avec l’interface que ses utilisateurs connaissent déjà. C’est aussi pourquoi corriger le font-size et la mise en page suffisait : une fois le champ correctement dimensionné, le calendrier natif de l’un ou l’autre OS s’affiche sans aucun code supplémentaire à écrire.