Formatage des dates et portabilité des fuseaux horaires
Séparez instants, dates calendaires, fuseaux et présentation locale pour éviter les erreurs de dates et d'heure d'été.
Vous voulez la documentation structurée pour Plateforme ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
Un affichage fiable des dates dans le navigateur commence par un modèle clair. Conservez un instant lorsqu'un événement est un point sur une ligne temporelle, une date calendaire lorsqu'il désigne seulement un jour, puis choisissez une politique de fuseau avant d'appeler Intl.DateTimeFormat. La locale règle la langue et l'ordre, mais elle ne choisit pas le fuseau d'un rendez-vous. Cette séparation évite les décalages de date et les surprises liées à l'heure d'été.
ECMA-402 définit les services d'internationalisation, MDN documente Intl.DateTimeFormat et la W3C explique pourquoi date et fuseau sont distincts. Ces sources permettent une présentation portable sans promettre les mêmes signes ou abréviations dans tous les environnements.
Décrire la valeur avant de la formater
Un instant comme 2026-01-01T01:30:00Z désigne le même moment partout; Z indique UTC. Les événements, journaux d'audit, paiements et livraisons de messages utilisent souvent un instant car les lecteurs peuvent être dans des lieux différents.
Une date calendaire est autre chose. Un anniversaire, une arrivée à l'hôtel ou une période de facturation peut désigner le jour métier, sans heure universelle. La convertir en instant puis appliquer le fuseau du lecteur peut la déplacer au jour précédent ou suivant. Conservez une date sans heure quand le domaine ne définit pas d'instant.
Une heure locale de site, comme « 09:00 à Berlin », exige les champs locaux et un identifiant IANA. Elle ne signifie pas « 09:00 dans le fuseau du lecteur ». Le produit doit choisir le fuseau du lieu, celui du participant ou un fuseau fixe de rapport. Définissez le contrat d'entrée et ne laissez pas le parseur JavaScript deviner une chaîne ambiguë.
Choisir la politique de fuseau
timeZone: 'UTC' convient à un rapport stable et timeZone: 'America/New_York' à l'heure civile de cette région. Sans option, l'environnement utilise généralement son fuseau par défaut, ce qui convient parfois à une horloge personnelle mais pas à un rapport fixe. La source du fuseau doit être un choix visible, le lieu de l'événement ou une règle d'organisation. Une préférence du navigateur est un indice pratique, pas une preuve de résidence ou d'identité.
Affichez le nom, le décalage ou un libellé de fuseau lorsque la comparaison est importante. Conservez un identifiant IANA pour les événements récurrents; un simple décalage ne représente pas une future transition. Le format choisi doit correspondre au domaine et toute conversion doit être documentée.
Utiliser ECMA-402 sans figer la ponctuation
Le formateur reçoit locale, options et fuseau. L'application choisit les champs qui ont un sens; le navigateur choisit ordre, chiffres et signes. Langue et fuseau sont indépendants: une interface espagnole peut montrer l'heure de Toronto, et une interface française un rapport UTC. formatToParts() permet un affichage sémantique, mais son ordre n'est pas identique dans toutes les langues.
Évitez les tests d'égalité exacte entre versions. Les données locales peuvent évoluer. Vérifiez la valeur, les options, le jour et l'heure compréhensibles. Gardez les données machine séparées du texte humain: une chaîne localisée ne doit pas être reparsée comme horodatage.
Traiter l'heure d'été et les limites du calendrier
Une transition peut supprimer une heure ou en répéter une. Un système de rendez-vous doit définir la règle de résolution avant l'enregistrement. Intl.DateTimeFormat affiche un instant déjà résolu; il ne définit pas cette règle. Testez des fuseaux IANA réels avant et après les transitions, ainsi que les récurrences et les lecteurs éloignés.
Les années bissextiles et la longueur des mois exigent la même prudence. Ajouter 24 heures à un instant n'équivaut pas toujours à passer au lendemain civil. Décidez si la récurrence suit une durée écoulée ou l'arithmétique du calendrier, puis formatez le résultat.
Prévoir une solution portable
Détectez les fonctions réellement utilisées. En cas d'indisponibilité, utilisez une configuration plus simple, une valeur rendue par le serveur ou une date structurée portant son libellé UTC. La solution de repli doit conserver valeur et contexte, sans remplacer silencieusement l'heure du lieu par celle du lecteur.
Résolvez les étiquettes demandées dans la liste des langues prises en charge. Une variante absente peut revenir à la langue de base sans modifier la politique de fuseau. Les mises à jour du système peuvent changer les règles futures; gardez l'instant d'origine et l'identifiant de fuseau. Serveur et navigateur doivent partager la valeur et le fuseau déclarés pour éviter un premier affichage UTC suivi d'un saut local.
Rendre l'affichage accessible
Indiquez le rôle de la date: échéance, départ, renouvellement ou mesure. Ajoutez le contexte du fuseau lorsque l'interprétation peut varier. Utilisez des libellés sémantiques, un texte agrandissable et une mise en page qui accepte les noms longs. Vérifiez lecteur d'écran et écriture de droite à gauche. Lors d'un changement de langue ou de fuseau, conservez le formulaire et l'identité de l'événement et dites si seule la présentation change.
Une erreur doit préciser si le champ attend une date calendaire, un instant avec décalage ou une heure locale avec fuseau, avec un exemple dans la langue active. « Date invalide » ne suffit pas près d’une transition.
Tester avec des tâches réelles
Gardez un instant, une date sans heure, un rendez-vous de site et une récurrence. Avec 2026-01-01T01:30:00Z, UTC représente le 1 janvier 2026 à 01:30, tandis que America/New_York représente le 31 décembre 2025 à 20:30. Les deux doivent désigner le même instant et afficher leur contexte. Une date 2026-01-01 doit rester le 1 janvier dans tous les fuseaux.
Pour reproduire un problème, notez versions, données de fuseau du système, locale, entrée et politique choisie. Ces éléments suffisent sans constituer un inventaire de caractéristiques du navigateur. Les préférences de langue et de fuseau ne sont pas des identifiants.
La portabilité des dates est un contrat: les valeurs structurées fixent le sens, la politique de fuseau fixe le contexte et ECMA-402 fournit la présentation localisée. Une mise à jour peut donc changer la ponctuation sans changer l’événement.
Nommez les champs instant, dateCalendaire, heureLocale et fuseau afin de rendre les conversions accidentelles visibles en revue.
Un courriel ou une notification doit inclure date, heure et fuseau lorsqu'une échéance existe, car le message peut être lu hors de l'interface.
Les migrations d'anciennes chaînes exigent une décision métier: convertir une date sans heure en UTC peut changer le jour présenté.
Les journaux opérationnels peuvent adopter UTC de manière cohérente, avec un choix séparé du fuseau pour les tableaux de bord.
Les tests doivent couvrir les frontières de mois et d'année ainsi qu'un fuseau dont les règles historiques sont connues.
La mise en page doit réserver de la place aux noms de mois longs et autoriser le retour à la ligne du libellé de fuseau.
Un sélecteur de fuseau doit afficher un nom reconnaissable, pas seulement un décalage ambigu.
Un export doit conserver le contexte du fuseau et le type de valeur pour rester compréhensible hors du produit.
Changer de langue peut changer l'affichage sans convertir une devise ni modifier l'instant enregistré.
Le serveur doit transmettre la valeur structurée avant son formatage afin d'éviter deux politiques cachées pendant l'hydratation.
Une récurrence calendaire doit définir le comportement pour les jours absents après un changement de mois.
Les heures répétées doivent être distinguées par l'instant ou le décalage avant la confirmation d'un rendez-vous.
Les informations de support doivent rester limitées à ce qui reproduit le résultat, et non devenir un profil du navigateur.
Un test d'accessibilité doit lire la date complète et le fuseau même si la vue visuelle est abrégée.
Une solution de repli doit conserver la date et expliquer son contexte dans une langue prise en charge.
Les abréviations peuvent changer entre versions; l'identifiant IANA et l'instant restent les références stables.
Le produit doit décider si l'utilisateur modifie une heure locale ou choisit uniquement un instant confirmé.
Ces règles transforment une différence typographique en variation inoffensive plutôt qu’en perte de sens.
Sources
- ECMA-402
- MDN : Intl.DateTimeFormat
- W3C Internationalisation : fuseaux horaires
- WHATWG HTML : Web application APIs
Voir le guide de localisation selon la langue du navigateur et le guide des données locales d Intl. Ils ne remplacent pas la décision explicite entre instant, date calendaire et rendez-vous local.
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.