{"id":4805,"date":"2026-10-07T19:23:39","date_gmt":"2026-10-07T17:23:39","guid":{"rendered":"https:\/\/sophie-matthieu.eu\/index.php\/2026\/10\/07\/le-formulaire-de-pre-inscription-de-lecole-saint-laud-avait-un-bug-de-calendrier\/"},"modified":"2026-10-07T19:45:02","modified_gmt":"2026-10-07T17:45:02","slug":"le-formulaire-de-pre-inscription-de-lecole-saint-laud-avait-un-bug-de-calendrier","status":"publish","type":"post","link":"https:\/\/sophie-matthieu.eu\/index.php\/2026\/10\/07\/le-formulaire-de-pre-inscription-de-lecole-saint-laud-avait-un-bug-de-calendrier\/","title":{"rendered":"Le formulaire de pr\u00e9-inscription de l’\u00e9cole Saint-Laud avait un bug de calendrier"},"content":{"rendered":"

Sophie g\u00e8re le site internet de l’\u00e9cole Saint-Laud \u00e0 Angers. Leur formulaire de pr\u00e9-inscription en ligne a un champ \u00ab Date de naissance \u00bb en <input type=\"date\"><\/code> HTML5 classique.<\/p>\n

En creusant un signalement de parent, j’ai trouv\u00e9 la ligne responsable :<\/p>\n

<input type=\"date\" name=\"e<?php echo $i; ?>_date\"\n       min=\"2011-01-01\" max=\"2023-12-31\"><\/code><\/pre>\n
Une date maximale cod\u00e9e en dur \u00e0 2023. Le calendrier d’un champ date<\/code> s’ouvre toujours sur sa borne haute : r\u00e9sultat, le s\u00e9lecteur s’affichait bloqu\u00e9 en 2023, des ann\u00e9es apr\u00e8s que la borne ait cess\u00e9 d’avoir un sens.<\/p>\n
Le correctif calcule la plage \u00e0 chaque chargement de page, au lieu de la figer :<\/p>\n
min=\"<?php echo (date('Y') - 12) . '-01-01'; ?>\"\nmax=\"<?php echo date('Y') . '-12-31'; ?>\"<\/code><\/pre>\n
M\u00eame largeur de plage qu’avant (treize ans), mais calcul\u00e9e dynamiquement : elle ne redeviendra plus jamais obsol\u00e8te.<\/p>\n
Au passage, j’en ai profit\u00e9 pour deux corrections de confort sur mobile, qui n’avaient jamais \u00e9t\u00e9 trait\u00e9es sur ce formulaire :<\/p>\n
    \n
  • aucun champ n’avait de font-size<\/code> explicite, ce qui fait zoomer automatiquement Safari iOS d\u00e8s qu’on touche un champ sous les 16 pixels ;<\/li>\n
  • la mise en page \u00e9tait en deux colonnes fixes, sans aucune r\u00e8gle @media<\/code> dans toute la feuille de style : sur petit \u00e9cran, le champ date se retrouvait \u00e9cras\u00e9 sur la moiti\u00e9 de la largeur.<\/li>\n<\/ul>\n
    Les deux sont corrig\u00e9s : 16 px partout, et une colonne unique sous 600 px de large. Test\u00e9 et confirm\u00e9 sur iPhone, Android et PC.<\/p>\n
    Un point qui m\u00e9rite d’\u00eatre not\u00e9 : comme ce champ reste un <input type=\"date\"><\/code> natif, et non un calendrier maison en JavaScript, c’est le syst\u00e8me d’exploitation du t\u00e9l\u00e9phone qui fournit le s\u00e9lecteur, pas le site. Sur iOS, Safari ouvre la roue de dates native d’iOS ; sur Android, Chrome ouvre la bo\u00eete de dialogue Material native du syst\u00e8me. Le site ne dessine rien lui-m\u00eame : il se contente de demander une date, et chaque OS r\u00e9pond avec l’interface que ses utilisateurs connaissent d\u00e9j\u00e0. C’est aussi pourquoi corriger le font-size<\/code> et la mise en page suffisait : une fois le champ correctement dimensionn\u00e9, le calendrier natif de l’un ou l’autre OS s’affiche sans aucun code suppl\u00e9mentaire \u00e0 \u00e9crire.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Sophie g\u00e8re le site internet de l’\u00e9cole Saint-Laud \u00e0 Angers. Leur formulaire de pr\u00e9-inscription en ligne a un champ \u00ab Date de naissance \u00bb en <input type=\u00a0\u00bbdate\u00a0\u00bb> HTML5 classique. En creusant un signalement de parent, j’ai trouv\u00e9 la ligne responsable : <input type=\u00a0\u00bbdate\u00a0\u00bb name=\u00a0\u00bbe<?php echo $i; ?>_date\u00a0\u00bb min=\u00a0\u00bb2011-01-01″ max=\u00a0\u00bb2023-12-31″> Une date maximale cod\u00e9e en dur […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4805","post","type-post","status-publish","format-standard","hentry","category-actualites-tech"],"_links":{"self":[{"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/posts\/4805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/comments?post=4805"}],"version-history":[{"count":4,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/posts\/4805\/revisions"}],"predecessor-version":[{"id":4809,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/posts\/4805\/revisions\/4809"}],"wp:attachment":[{"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/media?parent=4805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/categories?post=4805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sophie-matthieu.eu\/index.php\/wp-json\/wp\/v2\/tags?post=4805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}