Playground de date-fns

¿Qué es date-fns?

date-fns es una biblioteca moderna de utilidades de fechas para JavaScript que ofrece herramientas completas, consistentes y fiables para trabajar con fechas en JavaScript. A diferencia del objeto nativo Date de JavaScript, que tiene muchas peculiaridades e inconsistencias, date-fns ofrece un enfoque modular y funcional para la manipulación de fechas. Es tree‑shakeable, lo que significa que solo incluyes las funciones que realmente utilizas, manteniendo el tamaño de tu bundle al mínimo. La biblioteca soporta más de 200 funciones que cubren todo, desde formateo y análisis hasta comparación, manipulación y localización de fechas.

¿Por qué usar un playground de date-fns?

Trabajar con fechas en JavaScript puede ser complicado: zonas horarias, patrones de formateo y aritmética de fechas a menudo generan resultados inesperados. Un entorno de playground te permite experimentar con las funciones de date-fns en tiempo real, ver la salida inmediata y aprender la API sin configurar un proyecto completo. Es perfecto para probar cadenas de formato, depurar cálculos de fechas o crear rápidamente prototipos de lógica de fechas antes de integrarlos en tu aplicación.

Descripción de la herramienta

El date-fns Playground es un entorno de codificación interactivo que te permite escribir y ejecutar código JavaScript con la biblioteca completa de date-fns precargada. Toda la biblioteca date-fns está disponible a través del objeto dateFns, dándote acceso a todas las más de 200 funciones. El código se ejecuta automáticamente mientras escribes (con debouncing), y todas las salidas de console.log, console.warn y console.error aparecen en el terminal integrado bajo el editor. Esto lo hace ideal para aprender date-fns, probar operaciones de fechas y experimentar con diferentes opciones de formateo.

Ejemplos

Formatea la fecha actual:

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

Calcula los días entre dos fechas:

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

Añade tiempo a una fecha:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Próxima semana:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Próximo mes:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Verifica si una fecha está en el pasado o futuro:

const date = new Date(2024, 5, 15);
console.log("¿Es pasado?", dateFns.isPast(date));
console.log("¿Es futuro?", dateFns.isFuture(date));

Analiza una cadena de fecha:

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

Características

• Biblioteca completa de date-fns: Accede a todas las funciones 200+ de date-fns a través del objeto dateFns
• Ejecución de código en vivo: El código se ejecuta automáticamente mientras escribes con debounce inteligente
• Terminal integrado: Visualiza la salida de la consola al instante sin herramientas de desarrollo del navegador
• Resaltado de sintaxis: Resaltado de sintaxis JavaScript para mejor legibilidad del código
• Manejo de errores: Los errores en tiempo de ejecución se muestran claramente en la salida del terminal

Casos de uso

• Aprender date-fns: Experimenta con diferentes funciones y ve los resultados inmediatamente sin configurar un proyecto
• Pruebas de formato de fecha: Prueba diferentes cadenas de formato para encontrar el patrón exacto que necesitas
• Prototipado de cálculos de fecha: Prueba aritmética de fechas compleja como añadir días laborables, encontrar intervalos o comparar fechas
• Depuración de lógica de fechas: Aísla y prueba fragmentos de código relacionados con fechas de tus proyectos
• Conversiones rápidas de fechas: Convierte entre formatos de fecha o calcula diferencias de tiempo al instante

Funciones comunes de date-fns

Referencia de tokens de formato