Qu'est‑ce que date-fns ?

date-fns est une bibliothèque moderne d'utilitaires de dates JavaScript qui fournit des outils complets, cohérents et fiables pour travailler avec les dates en JavaScript. Contrairement à l'objet natif JavaScript Date, qui présente de nombreuses particularités et incohérences, date-fns propose une approche modulaire et fonctionnelle de la manipulation des dates. Elle est tree‑shakeable, ce qui signifie que vous n’incluez que les fonctions réellement utilisées, limitant ainsi la taille de votre bundle. La bibliothèque propose plus de 200 fonctions couvrant tout, du formatage et de l’analyse à la comparaison, la manipulation et la localisation des dates.

Pourquoi utiliser un bac à sable date-fns ?

Manipuler les dates en JavaScript peut être délicat — les fuseaux horaires, les modèles de formatage et l'arithmétique des dates entraînent souvent des résultats inattendus. Un environnement de bac à sable vous permet d’expérimenter les fonctions date-fns en temps réel, d’obtenir un résultat immédiat et d’apprendre l’API sans configurer un projet complet. C’est idéal pour tester des chaînes de formatage, déboguer des calculs de dates ou prototyper rapidement une logique de dates avant de l’intégrer à votre application.

Description de l'outil

Le bac à sable date-fns est un environnement de codage interactif qui vous permet d’écrire et d’exécuter du code JavaScript avec la bibliothèque complète date-fns pré‑chargée. L’ensemble de la bibliothèque date-fns est accessible via l’objet dateFns, vous donnant accès à plus de 200 fonctions. Le code s’exécute automatiquement au fur et à mesure que vous tapez (avec débounce), et toutes les sorties console.log, console.warn et console.error apparaissent dans le terminal intégré sous l’éditeur. Cela le rend idéal pour apprendre date-fns, tester des opérations sur les dates et expérimenter différentes options de formatage.

Exemples

Formater la date actuelle :

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Output: December 30th, 2025

Calculer le nombre de jours entre deux dates :

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " days");
// Output: 364 days

Ajouter du temps à une date :

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Next week:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Next month:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Vérifier si une date est passée ou future :

const date = new Date(2024, 5, 15);
console.log("Is past?", dateFns.isPast(date));
console.log("Is future?", dateFns.isFuture(date));

Analyser une chaîne de date :

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Output: Thursday, December 25th, 2025

Fonctionnalités

  • Bibliothèque date-fns complète : Accédez à plus de 200 fonctions date-fns via l’objet dateFns
  • Exécution de code en direct : Le code s’exécute automatiquement au fur et à mesure que vous tapez avec un débounce intelligent
  • Terminal intégré : Visualisez la sortie console instantanément sans les outils de développement du navigateur
  • Mise en évidence de la syntaxe : coloration syntaxique JavaScript pour une meilleure lisibilité du code
  • Gestion des erreurs : Les erreurs d’exécution sont affichées clairement dans la sortie du terminal

Cas d’utilisation

  • Apprendre date-fns : Expérimentez différentes fonctions et voyez les résultats immédiatement sans configuration de projet
  • Test de format de date : Essayez différentes chaînes de format pour trouver le modèle de sortie exact dont vous avez besoin
  • Prototypage de calculs de dates : Testez des arithmétiques de dates complexes comme l’ajout de jours ouvrés, la recherche d’intervalles ou la comparaison de dates
  • Débogage de logique de dates : Isolez et testez les extraits de code liés aux dates de vos projets
  • Conversions rapides de dates : Convertissez entre différents formats de date ou calculez les différences de temps à la volée

Fonctions date-fns courantes

Fonction Description Exemple
format Formater une date en chaîne dateFns.format(date, "yyyy-MM-dd")
parse Analyser une chaîne en date dateFns.parse("2025-01-01", "yyyy-MM-dd", new Date())
addDays Ajouter des jours à une date dateFns.addDays(date, 7)
subMonths Soustraire des mois d’une date dateFns.subMonths(date, 3)
differenceInDays Obtenir le nombre de jours entre deux dates dateFns.differenceInDays(dateA, dateB)
isAfter Vérifier si une date est postérieure à une autre dateFns.isAfter(dateA, dateB)
isBefore Vérifier si une date est antérieure à une autre dateFns.isBefore(dateA, dateB)
startOfMonth Obtenir le premier jour du mois dateFns.startOfMonth(date)
endOfYear Obtenir le dernier instant de l’année dateFns.endOfYear(date)
formatDistance Différence de temps lisible par l’homme dateFns.formatDistance(dateA, dateB)

Référence des jetons de format

Jeton Description Exemple
yyyy Année sur 4 chiffres 2025
MM Mois sur 2 chiffres 01‑12
MMMM Nom complet du mois January
dd Jour sur 2 chiffres 01‑31
do Jour avec ordinal 1st, 2nd, 3rd
EEEE Nom complet du jour de la semaine Monday
EEE Jour de la semaine court Mon
HH Heure sur 24 heures 00‑23
hh Heure sur 12 heures 01‑12
mm Minutes 00‑59
ss Secondes 00‑59
a AM/PM AM, PM