W3docs

JavaScript: Fechas y Hora

En el desarrollo web, comprender y manipular fechas y horas es esencial para crear aplicaciones dinámicas centradas en el usuario con JavaScript.

Introducción al objeto Date de JavaScript

Comprender y manipular fechas y horas es fundamental para crear aplicaciones web dinámicas. JavaScript ofrece un objeto Date integrado para gestionar estas tareas. Esta guía explica cómo crear fechas, leer y modificar sus partes, formatearlas y realizar aritmética de fechas, con ejemplos ejecutables a lo largo del texto.

Internamente, un Date es simplemente un número: la cantidad de milisegundos desde el epoch de Unix (00:00:00 UTC del 1 de enero de 1970). Todas las demás funcionalidades se construyen sobre ese único número, por lo que gran parte de la lógica de fechas se reduce a operaciones matemáticas ordinarias con números.

Creación de objetos Date

Hay cuatro formas habituales de instanciar un Date, cada una para un tipo de entrada diferente.

// 1. Current date and time (no arguments)
const now = new Date();

// 2. From a millisecond timestamp (epoch = 0)
const epoch = new Date(0); // 1970-01-01T00:00:00.000Z

// 3. From a date string (ISO 8601 is the only reliably portable format)
const parsed = new Date("2024-01-01T00:00:00");

// 4. From individual components: year, monthIndex, day, hours, minutes, seconds
const detailed = new Date(2024, 0, 1, 15, 30, 0); // Jan 1, 2024, 15:30:00
Advertencia

El mes está indexado desde 0. En la forma de componentes, enero es 0, febrero es 1, … diciembre es 11. El día del mes, en cambio, empieza en 1. Este desfase de uno es el error más frecuente con Date. La misma indexación desde 0 se aplica a getMonth() y setMonth().

Análisis de cadenas ISO frente a otros formatos

Solo el formato ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) garantiza el mismo análisis en todos los motores. Una cadena de fecha sin más, como "2024-01-01", se trata como medianoche UTC, mientras que "2024-01-01T00:00:00" (sin Z) se interpreta como hora local. Otros formatos (p. ej. "01/02/2024") dependen de la implementación — evítalos.

javascript— editable

Obtención de componentes de fecha y hora

Una vez que tienes un Date, puedes leer cada parte con un método get*. Estos devuelven valores en hora local (consulta Trabajo con zonas horarias para las variantes UTC).

javascript— editable

Modificación de componentes de fecha y hora

Cada método get* tiene un método set* correspondiente que muta la fecha en el lugar. Los objetos Date son mutablesset* modifica el original en lugar de devolver una nueva fecha.

javascript— editable

Autocorrección (el desbordamiento se ajusta automáticamente)

Si estableces un valor fuera de rango, Date lo normaliza silenciosamente — no se produce ningún error. Establecer el día 32 de enero avanza al mes de febrero. Esto es realmente útil para aritmética: para sumar 5 días, simplemente suma 5 a getDate() y deja que la fecha se ajuste sola.

javascript— editable

Marcas de tiempo: getTime y Date.now

getTime() devuelve la fecha como una marca de tiempo en milisegundos, y el método estático Date.now() devuelve la marca de tiempo actual sin crear un objeto. Las marcas de tiempo son la forma más sencilla de comparar fechas o medir el tiempo transcurrido.

javascript— editable

Trabajo con zonas horarias

Un Date almacena un instante UTC; los métodos get* lo leen en la zona horaria local del sistema. Usa las variantes getUTC* para leer el valor UTC, y la API Intl (mediante toLocaleString) para representar cualquier otra zona.

javascript— editable

Formateo de fechas y horas

Para producir una cadena legible por máquinas, usa toISOString(); para una salida legible por personas, toLocaleDateString() / toLocaleTimeString() respetan la configuración regional del usuario. Para un formato completamente personalizado, ensambla las partes manualmente (recuerda getMonth() + 1).

javascript— editable
Información

toISOString() es exactamente lo que JSON.stringify usa para las fechas, por lo que un Date sobrevive a un ciclo de ida y vuelta a texto y de vuelta. Consulta Trabajo con JSON para ver cómo revivir cadenas ISO como objetos Date.

Información

Explora bibliotecas modernas de fechas: aunque el objeto nativo Date de JavaScript proporciona manejo básico de fechas, bibliotecas como date-fns y Luxon ofrecen utilidades robustas para cálculos complejos, internacionalización y manejo de zonas horarias. Moment.js está oficialmente desaconsejado; considera estas alternativas modernas para nuevos proyectos.

Aritmética de fechas y diferencias

Dado que un Date es en realidad un número, restar una fecha de otra da la diferencia en milisegundos. El operador de sustracción convierte cada fecha mediante getTime(), por lo que endDate - startDate funciona directamente. Divide por los milisegundos de un día para obtener el número de días.

javascript— editable

Para sumar tiempo, es preferible mutar con set* (que gestiona correctamente el desbordamiento de mes/año) en lugar de sumar milisegundos directamente, lo que ignora los cambios de horario de verano.

javascript— editable

Uso de bibliotecas para manipulaciones avanzadas

Para manipulaciones y formatos de fechas más complejos, varias bibliotecas pueden simplificar estas tareas. Bibliotecas como date-fns y Luxon ofrecen funcionalidades extendidas más allá del objeto nativo Date, facilitando tareas como el análisis, la internacionalización y el manejo de zonas horarias complejas. Además, la API Temporal está actualmente en desarrollo para eventualmente reemplazar el objeto nativo Date con una solución más robusta, inmutable y con soporte de zonas horarias.

Conclusión

Dominar el objeto Date en JavaScript es esencial para desarrollar aplicaciones web dinámicas que interactúen con fechas y horas de manera efectiva. A través de la creación, obtención, modificación y formateo de fechas, los desarrolladores pueden construir funcionalidades sofisticadas que respondan al tiempo real. Ya sea para programar eventos, calcular duraciones o mostrar líneas de tiempo, las capacidades que ofrece el objeto Date de JavaScript y las diversas bibliotecas de terceros convierten la manipulación de fechas y horas en una herramienta poderosa en tu arsenal de desarrollo web.

Práctica

Práctica
¿Cuál de los siguientes métodos se puede usar para extraer distintas partes de una fecha de JavaScript?
¿Cuál de los siguientes métodos se puede usar para extraer distintas partes de una fecha de JavaScript?
Was this page helpful?