kalvn logo kalvn

Formater une date en JavaScript sans librairie

Écrit le
2 mars 2025
·
3 minutes
de lecture

Ce matin je suis tombé sur cet article qui détaille l'utilisation des méthodes toLocaleDateString, toLocaleTimeString et toLocaleString de l'objet Date pour afficher une date dans un format facilement lisible pour un humain, tout en s'adaptant à ses préférences régionales.

La gestion des dates étant connue pour être laborieuse en JavaScript, je ne m'étais jamais penché sur les possibilités offertes par les objets natifs et ai toujours eu tendance à faire confiance à des librairies externes, date-fns en tête.

Cependant s'il y a un domaine dans lequel les objets natifs excellent et qui sont plus délicats pour une librairie externe c'est la localisation. C'est à dire le fait d'ajuster l'affichage d'une valeur en fonction des préférences régionales de l'utilisateur.

Un navigateur web est fourni d'office avec les traductions pour toutes les langues possibles et imaginables, et JavaScript ne déroge pas à la règle.

À l'inverse, si elle souhaite gérer plusieurs langues, une libraire externe devra être fournie avec son pack de langues ce qui peut alourdir considérablement la quantité de code que vos utilisateurs devront télécharger, en particulier si vous autorisez un changement de langue dynamique.

Avant d'envisager d'utiliser une librairie, il convient donc de vérifier s'il n'existe pas déjà une solution native au problème que l'on essaye de résoudre.

Date.toLocaleString et ses dérivés

L'objet natif Date dispose de 3 méthodes:

Je vais me focaliser sur la troisième dans la mesure où elle regroupe les deux autres, mais leur fonctionnement est similaire.

Adapter l'affichage à une langue ou un pays

Pour afficher simplement la date et l'heure qui correspondent à la langue dans laquelle l'utilisateur navigue :

console.log(new Date().toLocaleString());

Difficile de faire plus simple. Le résultat sera bien sûr fonction des paramètres du navigateur utilisé.

Pour forcer une langue ou une région :

// Format allemand :
console.log(new Date().toLocaleString('de'));
// 2.3.2025, 09:24:37

// Format anglais pour les États-Unis :
console.log(new Date().toLocaleString('en-US'));
// 3/2/2025, 9:24:37 AM

// Format anglais pour le Royaume-Uni :
console.log(new Date().toLocaleString('en-GB'));
// 02/03/2025, 09:24:37

Le paramètre est assez flexible, il gère au choix :

Choisir les champs à afficher

En plus du choix de la langue, il est possible de paramétrer les champs à afficher et leur format, exemple :

console.log(new Date().toLocaleString('de', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}));
// Sonntag, 2. März 2025

Il est également possible de choisir entre le format 12 heures ou 24 heures :

console.log(new Date().toLocaleString('en-US', {
  hour12: false
}));
// 3/2/2025, 15:25:34

Choisir le fuseau horaire

Dans certains cas il est utile de pouvoir sélectionner un fuseau horaire différent de celui du contexte d'exécution :

// Date au format américain mais sur le fuseau horaire de l'Australie :
console.log(new Date().toLocaleString('en-US', {
  timeZone: 'Australia/Sydney'
}));
// 3/2/2025, 7:27:34 PM

Pour afficher explicitement le fuseau horaire dans le résultat, l'option timeZoneName peut être utilisée :

console.log(new Date().toLocaleString('en-US', {
  timeZone: 'Australia/Sydney',
  timeZoneName: 'short'
}));
// 3/2/2025, 7:27:57 PM GMT+11

Il existe bien d'autres options que je vous laisse le soin d'étudier.

Si votre cas d'usage nécessite de paramétrer plus précisément l'affichage d'une date ou d'une heure, et en attendant que la nouvelle API JavaScript Temporal ne se démocratise, il reste préférable de faire appel à une libraire externe.