Bac à sable date-fns
Testez et expérimentez les fonctions de la bibliothèque date-fns dans un bac à sable JavaScript en direct avec sortie instantanée
Entrée
Sortie
Documentation
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, 2025Calculer 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 daysAjouter 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, 2025Fonctionnalité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 |