Guía de Formateo de Fechas en JavaScript: Cómo Formatear Fechas Correctamente con Ejemplos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción: Por qué el Formateo de Fechas es Importante en JavaScript

En el desarrollo web con JavaScript, mostrar y gestionar fechas y horas es esencial. Por ejemplo, aplicaciones de calendario y sistemas de gestión de registros requieren que los datos de fecha y hora se formateen correctamente. Sin embargo, el manejo de fechas en JavaScript puede resultar un poco complejo para los principiantes.

En esta guía presentamos técnicas prácticas y ejemplos de código para ayudarte a dominar el formateo de fechas en JavaScript. Desde el uso básico del objeto Date hasta el uso avanzado de Intl.DateTimeFormat, e incluso comparaciones de bibliotecas externas, este artículo ofrece una explicación completa.

Escenarios Comunes en los que se Requiere Formatear Fechas

1. Visualización de datos en aplicaciones web:

• Soporte para usuarios en diferentes calendarios y zonas horarias.

1. Gestión de registros y depuración:

• Registro de marcas de tiempo para errores y acciones de usuarios.

1. Soporte multilingüe:

• Ajuste de los formatos de fecha para usuarios internacionales.

Beneficios para los Lectores

Al leer esta guía, adquirirás las siguientes habilidades:

• Comprender cómo trabajar con el objeto Date básico.
• Mostrar fechas de forma flexible mediante formateo manual y métodos incorporados.
• Programar de manera eficiente con la ayuda de bibliotecas externas de fechas.

En la siguiente sección, analizaremos más de cerca los fundamentos del objeto Date de JavaScript. Entender esto te permitirá avanzar sin problemas a temas más avanzados más adelante.

2. Conceptos Básicos del Manejo de Fechas en JavaScript: ¿Qué es el Objeto Date?

En JavaScript, el objeto Date se utiliza para gestionar fechas y horas. Comprender este objeto es el primer paso para manejar correctamente el formateo de fechas. Esta sección explica el uso básico del objeto Date.

2.1 Cómo Crear un Objeto Date

Se puede crear un objeto Date de las siguientes maneras.

1. Obtener la fecha y hora actuales

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. Establecer una fecha y hora específicas

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. Crear una fecha a partir de una cadena

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

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

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Métodos para Obtener Componentes de Fecha y Hora

El objeto Date proporciona métodos para obtener componentes individuales de fecha y hora.

2.3 Trabajo con Zonas Horarias y UTC

Obtener la hora local:

const date = new Date();
console.log(date.toString()); // Local time

Obtener la hora UTC:

console.log(date.toUTCString()); // UTC-based time

Obtener el desfase de zona horaria:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Resumen

En esta sección explicamos los conceptos básicos del objeto Date en JavaScript, incluyendo cómo crear fechas y cómo obtener o manipular sus componentes.

En la siguiente sección, profundizaremos en métodos específicos para formatear fechas en JavaScript.

3. Tres Formas de Formatear Fechas en JavaScript

JavaScript ofrece varias maneras de formatear fechas en diferentes representaciones. En esta sección explicamos en detalle tres enfoques: formateo manual, métodos incorporados y opciones avanzadas de formateo.

3.1 Formateo Manual: De lo Básico al Uso Práctico

Ejemplo Simple de Formato Personalizado

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

js const formattedDate = ${year}-${month}-${day}; console.log(formattedDate); // Ejemplo: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

js const date = new Date(); console.log(date.toLocaleDateString(‘ja-JP’)); // Ejemplo: 2024/12/28

Customization with Options

js const options = { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }; console.log(date.toLocaleDateString(‘ja-JP’, options)); // Ejemplo: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

js const date = new Date(); const formatter = new Intl.DateTimeFormat(‘ja-JP’, { dateStyle: ‘full’ }); console.log(formatter.format(date)); // Ejemplo: Saturday, December 28, 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

js const moment = require(‘moment’); // Importar en un entorno Node.js const now = moment(); // Fecha y hora actuales console.log(now.format(‘YYYY-MM-DD HH:mm:ss’)); // Ejemplo: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

js import { format, addDays } from ‘date-fns’;

const now = new Date(); console.log(format(now, ‘yyyy-MM-dd’)); // Ejemplo: 2024-12-28

const nextWeek = addDays(now, 7); console.log(format(nextWeek, ‘yyyy-MM-dd’)); // Ejemplo: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

js const dayjs = require(‘dayjs’);

const now = dayjs(); console.log(now.format(‘YYYY-MM-DD’)); // Ejemplo: 2024-12-28

const nextWeek = now.add(7, ‘day’); console.log(nextWeek.format(‘YYYY-MM-DD’)); // Ejemplo: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

js const selectedDate = new Date(); // Fecha seleccionada por el usuario

const formattedDate = selectedDate.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘long’, day: ‘numeric’, weekday: ‘long’ });

console.log(Fecha seleccionada: ${formattedDate}); // Ejemplo: Selected date: Saturday, December 28, 2024

5.2 Managing Timestamps in Log Files

Implementation Example

js const logTime = new Date().toISOString(); // Obtener fecha y hora en formato ISO console.log([LOG] ${logTime}: Proceso iniciado); // Ejemplo: [LOG] 2024-12-28T05:30:00.000Z: Process started

5.3 Validating and Formatting Form Input Dates

Implementation Example

js function formatInputDate(inputDate) { const date = new Date(inputDate); // Convertir cadena de entrada a un objeto Date

if (isNaN(date)) { console.log(‘Invalid date format.’); return null; }

return date.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }); }

console.log(formatInputDate(‘2024-12-28’)); // Ejemplo: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1: ¿Cómo puedo mostrar fechas y horas en formato ISO?

Respuesta

El formato ISO es un estándar internacional para la representación de fechas y horas y se usa ampliamente en bases de datos y comunicaciones API. En JavaScript, puedes usar el método toISOString() del objeto Date.

Código de ejemplo

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2: ¿Cómo debo manejar la diferencia entre la hora UTC y la hora local?

Respuesta

Por defecto, JavaScript utiliza la hora local, pero también proporciona métodos para convertir de y hacia UTC.

Código de ejemplo

Convertir hora local a UTC:

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

Convertir UTC a hora local:

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3: ¿Cuál es la forma más sencilla de manejar el relleno con ceros en el formato de fechas?

Respuesta

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Resumen

En esta sección, cubrimos preguntas frecuentes sobre el formato de fechas en JavaScript y proporcionamos soluciones prácticas. En la siguiente sección, concluiremos el artículo con un resumen y un plan de acción para aplicar lo que has aprendido.

7. Conclusión y Pasos Prácticos Siguientes

7.1 Principales Conclusiones de Este Artículo

1. Fundamentos del Objeto Date de JavaScript: Explicamos cómo crear objetos Date y usar métodos para obtener y manipular valores de fecha y hora.
2. Tres Enfoques para Formatear Fechas: Formateo manual, métodos incorporados y uso de bibliotecas externas.
3. Casos de Uso Prácticos: Ejemplos del mundo real como calendarios, gestión de registros y validación de formularios.
4. FAQ: Desafíos comunes y soluciones probadas para el formateo de fechas.

7.2 Plan de Acción para la Implementación Práctica

1. Probar los Ejemplos de Código: Ejecuta el código de muestra en un editor en línea o en tu entorno de desarrollo local para profundizar tu comprensión.
2. Aplicar a Proyectos Reales: Integra el formateo de fechas en proyectos reales añadiendo funcionalidades de calendario o gestión de registros.
3. Comparar Bibliotecas: Prueba Moment.js, date-fns y Day.js para determinar cuál se adapta mejor a los requisitos de tu proyecto.

7.3 Reflexiones Finales

El formateo de fechas en JavaScript abarca desde operaciones simples hasta personalizaciones avanzadas y potentes bibliotecas externas. Usa esta guía como referencia para implementar un manejo de fechas eficiente, flexible y mantenible en tus aplicaciones.