Vous avez du mal à afficher une date correctement en JavaScript ? Vous voulez transformer l’affichage par défaut en un simple `jj/mm/aaaa` ? Vous cherchez la méthode la plus simple et la plus fiable pour y arriver ?
Cet article vous montre les meilleures approches pour formater une date en JavaScript, avec des exemples de code clairs à copier directement dans vos projets. Des méthodes natives modernes aux bibliothèques spécialisées, vous trouverez la solution adaptée à votre besoin.
Tableau Comparatif des Méthodes de Formatage de Date en JavaScript
Pour aller droit au but, voici un résumé des options disponibles. Ce tableau vous aide à choisir rapidement la bonne méthode selon votre situation.
| Méthode | Exemple de code | Résultat type | Idéal pour… |
|---|---|---|---|
toLocaleDateString() |
new Date().toLocaleDateString('fr-FR'); |
« 25/12/2024 » | Afficher une date simple dans la langue de l’utilisateur, sans se compliquer la vie. |
Intl.DateTimeFormat() |
new Intl.DateTimeFormat('fr-FR', { dateStyle: 'full' }).format(new Date()); |
« mercredi 25 décembre 2024 » | Avoir un contrôle total sur le format international (date, heure, fuseau horaire). C’est la meilleure pratique moderne. |
Méthode Manuelle (get...) |
const d = new Date(); `${d.getFullYear()}-${d.getMonth()+1}`; |
« 2024-12 » | Créer un format très spécifique (ex: `YYYY-MM-DD`) qui n’est pas standard, sans ajouter de dépendance. |
Bibliothèque (date-fns) |
import { format } from 'date-fns'; format(new Date(), 'yyyy-MM-dd'); |
« 2024-12-25 » | Les projets qui nécessitent des manipulations de dates complexes (calculs, comparaisons, fuseaux horaires avancés). |
Les Méthodes Modernes et Internationales (Recommandé)
Le JavaScript moderne intègre des outils puissants pour gérer les dates sans avoir besoin de bibliothèques externes. Ces méthodes natives sont basées sur l’API d’internationalisation (`Intl`), ce qui garantit un affichage correct partout dans le monde.
Utiliser ces API est aujourd’hui la meilleure pratique pour la plupart des projets web. Elles sont performantes et supportées par tous les navigateurs récents.
toLocaleDateString() : la solution rapide et simple
C’est la méthode la plus directe pour obtenir une chaîne de caractères lisible. Elle formate un objet Date en tenant compte des conventions locales du navigateur ou d’une langue que vous spécifiez.
Pour un affichage en français, il suffit de passer l’argument 'fr-FR'. Sans argument, elle utilise les paramètres du système de l’utilisateur.
const today = new Date();
// Affiche la date selon les conventions françaises
console.log(today.toLocaleDateString('fr-FR')); // "25/12/2024"
Cette méthode est parfaite pour un besoin simple. Son principal défaut est le manque de contrôle sur le format exact. Le rendu peut légèrement varier entre les navigateurs.
Intl.DateTimeFormat() : le contrôle total sur le format
Cette méthode est le moteur qui se cache derrière toLocaleDateString(). Elle offre une granularité beaucoup plus fine grâce à un objet d’options. Vous pouvez tout choisir : la longueur du jour, du mois, le format de l’année, et même le fuseau horaire.
C’est la solution recommandée pour standardiser l’affichage sur votre application, peu importe la configuration de l’utilisateur.
dateStyle/timeStyle: ‘full’, ‘long’, ‘medium’, ‘short’ pour des formats prédéfinis.year,month,day: ‘numeric’ ou ‘2-digit’.weekday,month: ‘long’, ‘short’, ou ‘narrow’.timeZone: Pour forcer un affichage dans un fuseau horaire précis (ex: ‘UTC’).
const eventDate = new Date('2025-07-14T10:00:00');
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
const formatter = new Intl.DateTimeFormat('fr-FR', options);
console.log(formatter.format(eventDate)); // "lundi 14 juillet 2025"
L’Approche Manuelle pour un Format sur Mesure
Parfois, vous avez besoin d’un format très précis qui n’est pas couvert par les méthodes natives, comme le format `YYYY-MM-DD` souvent utilisé par les API. Dans ce cas, vous pouvez construire votre chaîne de caractères vous-même.
L’objet Date fournit des méthodes pour récupérer chaque partie de la date :
getFullYear(): l’année sur 4 chiffres.getMonth(): le mois, de 0 (janvier) à 11 (décembre).getDate(): le jour du mois (de 1 à 31).getHours(),getMinutes(),getSeconds(): l’heure, les minutes, les secondes.
getMonth() !
La méthode getMonth() renvoie un index qui commence à 0. C’est la source d’erreur la plus fréquente. Vous devez toujours ajouter +1 au résultat de getMonth() pour obtenir le numéro de mois correct (1 pour janvier, 12 pour décembre).
Exemple : Obtenir le format `YYYY-MM-DD`
Ce format est un standard (ISO 8601) très courant pour les bases de données et les API. Voici une fonction simple pour l’obtenir, en s’assurant que les mois et jours ont toujours deux chiffres (ex: `05` au lieu de `5`).
La méthode padStart() est parfaite pour ajouter un ‘0’ au début si le nombre est inférieur à 10.
function formatDateToISO(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Ajoute +1 et le '0'
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
const myDate = new Date('2025-03-05');
console.log(formatDateToISO(myDate)); // "2025-03-05"
Exemple : Obtenir le format `jj/mm/aaaa hh:mm`
De la même manière, on peut construire un format plus familier en France. On assemble les différentes parties en ajoutant les séparateurs corrects.
function formatDateTimeFrench(date) {
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${day}/${month}/${year} ${hours}:${minutes}`;
}
const now = new Date();
console.log(formatDateTimeFrench(now)); // "25/12/2024 14:30" (exemple)
Quand Utiliser une Bibliothèque Externe ? (`date-fns`, `Day.js`)
Le JavaScript natif est suffisant pour formater des dates. Mais si vous devez faire des manipulations complexes, une bibliothèque dédiée vous fera gagner beaucoup de temps et évitera des erreurs.
Pensez à utiliser une librairie si vous avez besoin de :
- Ajouter ou soustraire du temps (ex: « ajouter 3 semaines », « il y a 2 heures »).
- Comparer des dates (ex: « est-ce que cette date est avant celle-là ? »).
- Gérer des fuseaux horaires de manière avancée.
- Analyser des formats de date complexes.
date-fns : la référence moderne et modulaire
date-fns est la bibliothèque la plus recommandée aujourd’hui. Elle est légère, modulaire et immuable (elle ne modifie jamais la date d’origine). Son approche fonctionnelle la rend très simple à utiliser.
Comme elle est modulaire, vous n’importez que les fonctions dont vous avez besoin, ce qui garde votre projet léger.
date-fns :
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
const myDate = new Date();
// 'PPPP' est un format prédéfini pour une date longue en toutes lettres
const result = format(myDate, 'PPPP', { locale: fr });
console.log(result); // "mercredi 25 décembre 2024"
Day.js : une alternative légère à Moment.js
Day.js est une autre excellente option. Elle a été conçue comme un remplaçant moderne et beaucoup plus léger de l’ancienne bibliothèque Moment.js. Son API est très similaire, ce qui facilite la migration depuis un ancien projet.
Pourquoi ne plus utiliser `Moment.js` en 2025 ?
Pendant des années, Moment.js a été le standard pour manipuler les dates en JavaScript. Cependant, le projet est maintenant en mode « maintenance » : il ne reçoit plus de nouvelles fonctionnalités, seulement des corrections de bugs critiques. Il est fortement déconseillé de l’utiliser pour de nouveaux projets.
Les principaux problèmes de Moment.js sont :
- Il est lourd : C’est un gros fichier qui ralentit le chargement de votre page.
- Il n’est pas modulaire : Vous chargez toute la bibliothèque même si vous n’utilisez qu’une seule fonction.
- Il est mutable : Les opérations modifient l’objet date original, ce qui peut causer des bugs difficiles à trouver.
Les alternatives comme date-fns ou Day.js sont bien meilleures sur tous ces points.
Foire Aux Questions (FAQ) sur le Formatage de Dates en JS
Comment obtenir la date du jour en format `jj/mm/aaaa` ?
La méthode la plus simple est d’utiliser toLocaleDateString() avec la locale française.
const today = new Date();
console.log(today.toLocaleDateString('fr-FR')); // "25/12/2024"
Comment convertir un timestamp en date lisible ?
Un timestamp est un nombre de millisecondes écoulées depuis le 1er janvier 1970 (Epoch Unix). Vous pouvez le passer directement au constructeur new Date().
const timestamp = 1735131600000; // Timestamp pour le 25 déc 2024 à 14h
const dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp.toLocaleString('fr-FR')); // "25/12/2024, 14:00:00"
Comment formater une date en UTC ?
Pour éviter les problèmes de fuseau horaire, vous pouvez utiliser les méthodes UTC de l’objet Date (getUTCFullYear(), etc.) ou spécifier le fuseau horaire avec Intl.DateTimeFormat.
const date = new Date();
const options = { timeZone: 'UTC', year: 'numeric', month: 'numeric', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('fr-FR', options);
console.log(formatter.format(date)); // Affiche la date en UTC
Quelle est la différence entre `getDate()` et `getDay()` ?
C’est une confusion fréquente.
getDate()renvoie le jour du mois (un nombre de 1 à 31).getDay()renvoie le jour de la semaine (un nombre de 0 pour dimanche à 6 pour samedi).
Comment ajouter 10 jours à une date en JavaScript ?
Le plus simple et le plus sûr est d’utiliser une bibliothèque comme date-fns. La manipulation manuelle peut être complexe à cause des changements de mois et d’années.
import { add } from 'date-fns';
const today = new Date();
const futureDate = add(today, { days: 10 });
console.log(futureDate.toLocaleDateString('fr-FR'));
Pour résumer, le choix de la méthode dépend de votre besoin. Pour un affichage simple et rapide, toLocaleDateString() fait très bien le travail. Si vous avez besoin de plus de contrôle et de cohérence, Intl.DateTimeFormat() est la solution moderne et robuste.
L’approche manuelle est utile pour des formats très spécifiques, mais attention aux erreurs. Et si votre projet implique des calculs ou des manipulations de dates, n’hésitez pas à utiliser une bibliothèque légère comme date-fns pour vous simplifier la vie. Choisissez l’outil qui correspond à votre besoin, sans chercher la complexité.
