JavaScript Katana

Guía de Formateo de Fechas en JavaScript: De lo Básico a las Mejores Prácticas

Procesamiento de Datos (Cadenas, Números, Fechas, Arrays, Objetos)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introducción

Al trabajar con JavaScript, con frecuencia te encontrarás con situaciones que requieren manejar fechas. Por ejemplo, mostrar la fecha actual en un sitio web o gestionar la programación de eventos. Aunque el formateo de fechas en JavaScript puede parecer sencillo a primera vista, muchos principiantes lo encuentran confuso en la práctica.

En este artículo explicaremos claramente el formateo de fechas en JavaScript, desde lo básico hasta técnicas más avanzadas. Al leer esta guía, adquirirás los siguientes conocimientos:

  • Operaciones básicas de fechas usando el objeto Date de JavaScript
  • Métodos de formato de fechas usando APIs integradas como toLocaleDateString() e Intl.DateTimeFormat
  • Una introducción a bibliotecas útiles que facilitan el formateo de fechas

Este artículo está diseñado para ayudar a los principiantes a iniciar con los fundamentos, al mismo tiempo que brinda a los usuarios intermedios técnicas prácticas y consejos de uso de bibliotecas. De este modo, podrás adquirir habilidades útiles en el desarrollo real.

En la siguiente sección, comenzaremos revisando los fundamentos del objeto Date de JavaScript. Entender estos conceptos básicos te permitirá obtener una visión más profunda de cómo funciona el formateo de fechas.

2. Fundamentos | Manipulación básica de fechas en JavaScript

JavaScript proporciona el objeto Date para manejar fechas y horas. Al usar este objeto, puedes obtener la fecha y hora actuales, especificar una fecha concreta y realizar operaciones flexibles como añadir o restar tiempo.

2.1 Creación de objetos Date

1. Obtener la fecha y hora actuales

const today = new Date();
console.log(today); // Example output: Sun Dec 29 2024 14:30:00 GMT+0900 (JST)

2. Especificar una fecha concreta

const specificDate = new Date(2024, 11, 29); // Year, month (0-based), day
console.log(specificDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

3. Crear una fecha a partir de una marca de tiempo

const timestampDate = new Date(1703827200000); // Timestamp
console.log(timestampDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

2.2 Obtener componentes de la fecha

1. Obtener el año, mes y día

const today = new Date();
console.log(today.getFullYear()); // Get year: 2024
console.log(today.getMonth() + 1); // Get month (0-based): 12
console.log(today.getDate()); // Get day: 29

2.3 Editar y manipular fechas

1. Añadir días a una fecha

today.setDate(today.getDate() + 1);
console.log(today); // Displays the next day's date

2. Cambiar a una fecha concreta

today.setFullYear(2025); // Change year to 2025
today.setMonth(0); // Change month to January
today.setDate(1); // Change day to the 1st
console.log(today); // Example output: Wed Jan 1 2025 14:30:00 GMT+0900 (JST)

2.4 Zonas horarias y UTC

1. Obtener valores de fecha en UTC

console.log(today.getUTCFullYear()); // Get UTC year
console.log(today.getUTCMonth() + 1); // Get UTC month
console.log(today.getUTCDate()); // Get UTC day

2. Obtener una cadena de fecha ISO 8601

console.log(today.toISOString()); // Get ISO 8601 formatted string

Resumen

En esta sección explicamos los fundamentos de la manipulación de fechas usando el objeto Date de JavaScript.

3. Métodos de formato de fecha [Basic]

Al trabajar con fechas en JavaScript, personalizar el formato de visualización es extremadamente importante. En esta sección explicaremos los métodos básicos de formateo de fechas.

3.1 Concatenación simple de cadenas

1. Mostrar fechas en formato AAAA-MM-DD

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example output: 2024-12-29

3.2 Formatear con toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example output: 2024/12/29

3.3 Formato ISO 8601 y toISOString()

console.log(date.toISOString());
// Example output: 2024-12-29T05:30:00.000Z

Resumen

En esta sección, cubrimos los conceptos básicos del formateo de fechas en JavaScript.

4. Formateo Avanzado de Fechas [Practical]

En esta sección, introduciremos técnicas de formateo de fechas más avanzadas y prácticas.

4.1 Formateo Personalizado con Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formatter.format(date)); // Example output: 2024/12/29

4.2 Gestión de Zonas Horarias

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(formatter.format(utcDate));
// Example output: 12/29/2024, EST

Resumen

En esta sección, presentamos técnicas avanzadas de formateo de fechas adecuadas para aplicaciones del mundo real.

5. Bibliotecas Externas Útiles para el Formateo de Fechas

JavaScript ofrece muchas funcionalidades integradas para la manipulación de fechas, pero el uso de bibliotecas externas puede mejorar significativamente la eficiencia y la legibilidad.

5.1 Uso de Moment.js (Obsoleto)

const moment = require('moment');
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

5.2 Por Qué se Recomienda date-fns y Ejemplo de Uso

import { format } from 'date-fns';
const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

Resumen

En esta sección, presentamos los beneficios de las bibliotecas externas y cómo utilizarlas eficazmente.

6. Errores Comunes y Soluciones [FAQ]

Al trabajar con fechas en JavaScript, tanto principiantes como desarrolladores intermedios suelen encontrar errores y problemas similares. En esta sección, explicamos problemas comunes, sus causas y soluciones prácticas en formato de preguntas frecuentes.

P1. ¿Por qué el mes se desplaza en una unidad?

Ejemplo del Problema

const date = new Date(2024, 12, 29);
console.log(date); // Output: 2025-01-29

Causa

En JavaScript, los índices de los meses comienzan en 0, no en 1.

Solución

Al especificar un mes, reste 1 al valor del mes deseado.

const date = new Date(2024, 11, 29); // Correct way to specify December
console.log(date); // Output: 2024-12-29

P2. ¿Por qué los números no tienen ceros a la izquierda?

Ejemplo del Problema

const today = new Date();
const month = today.getMonth() + 1; // 12
const day = today.getDate();       // 9
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-9

Solución

Utilice slice() o padStart() para aplicar relleno con ceros.

const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-09

Resumen

En esta sección, explicamos errores comunes y consideraciones importantes relacionadas con el manejo de fechas en JavaScript, usando un formato de preguntas frecuentes.

7. Notas Importantes y Mejores Prácticas

El manejo de fechas en JavaScript es potente, pero los malentendidos de sus especificaciones o un uso inadecuado pueden generar fácilmente errores y fallos. En esta sección, presentamos notas importantes y mejores prácticas para una manipulación segura y eficiente de fechas.

7.1 Índices de Meses y Relleno con Ceros

const date = new Date(2024, 11, 29); // December 29
console.log(date.getMonth() + 1); // Output: 12

7.2 Gestión de Zonas Horarias

Uso de UTC

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
console.log(utcDate.toISOString());
// Output: 2024-12-29T12:00:00.000Z

7.3 Mejorando la legibilidad y mantenibilidad

Creando una función de formato de fecha

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));
// Output: 2024-12-29

Resumen

En esta sección, explicamos notas importantes y buenas prácticas para manejar fechas en JavaScript.

8. Conclusión

El manejo de fechas en JavaScript es una característica frecuentemente requerida en el desarrollo web. En este artículo, explicamos todo paso a paso, desde conceptos básicos hasta técnicas avanzadas, permitiendo a los lectores adquirir conocimientos que pueden aplicarse en proyectos reales.

Revisión de los aprendizajes clave

  1. Operaciones básicas con fechas
  • Se explicaron operaciones fundamentales y consideraciones importantes al usar el objeto Date.
  1. Fundamentos y técnicas avanzadas de formato
  • Se introdujo el formato personalizado, soporte de internacionalización y manejo de zonas horarias.
  1. Uso de bibliotecas externas
  • Se compararon características y uso de bibliotecas como date-fns y Day.js .
  1. Errores comunes y soluciones
  • Se organizaron casos de error típicos y sus soluciones en formato de preguntas frecuentes.

Próximos pasos

  1. Prueba el código de ejemplo en tu propio entorno.
  2. Introduce bibliotecas y realiza comparaciones.
  3. Desafíate con aplicaciones prácticas en sistemas reales.

Reflexiones finales

El manejo de fechas en JavaScript puede volverse complejo al considerar especificaciones detalladas e internacionalización. Utiliza este artículo como referencia para refinar aún más tus habilidades prácticas.

広告