¿Cómo puedo mostrar solo partes específicas de una fecha?

Introducción

Los formatos de fecha completos como "martes, 15 de octubre de 2024" funcionan bien en algunos contextos, pero a menudo necesitas mostrar solo ciertas partes de una fecha. Es posible que quieras mostrar solo el mes y el año para una fecha de publicación, solo el día de la semana para un calendario, o solo el día y el mes para un cumpleaños.

El Intl.DateTimeFormat de JavaScript proporciona opciones individuales para cada componente de fecha. En lugar de elegir un estilo predefinido como "completo" o "corto", especificas exactamente qué partes incluir y cómo formatear cada una.

Entendiendo los componentes de fecha

Una fecha contiene cuatro componentes principales que puedes formatear de forma independiente.

El weekday muestra qué día de la semana es. El year muestra qué año. El month muestra qué mes del año. El day muestra qué día del mes.

Cada componente acepta diferentes valores de formato que controlan cómo se muestra. Solo incluyes los componentes que necesitas en el objeto de opciones.

Formatear el día de la semana

La opción weekday muestra el día de la semana. Acepta tres valores que controlan la longitud de la salida.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

El valor narrow produce una sola letra. El valor short produce un nombre abreviado. El valor long produce el nombre completo del día de la semana.

Dos días de la semana pueden tener el mismo estilo narrow en algunos idiomas. Por ejemplo, martes (Tuesday) y jueves (Thursday) ambos comienzan con "T" en inglés.

Formatear el año

La opción year muestra el año. Acepta dos valores.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

El valor numeric muestra el año completo. El valor 2-digit muestra solo los últimos dos dígitos.

Formatear el mes

La opción month muestra el mes del año. Acepta cinco valores que proporcionan diferentes niveles de detalle.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

El valor numeric muestra el mes como un número sin ceros a la izquierda. El valor 2-digit muestra el mes como un número con ceros a la izquierda. El valor narrow produce una sola letra. El valor short produce un nombre de mes abreviado. El valor long produce el nombre completo del mes.

Dos meses pueden tener el mismo estilo narrow en algunos locales. Por ejemplo, marzo y mayo ambos comienzan con "M" en inglés.

Formatear el día

La opción day muestra el día del mes. Acepta dos valores.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

El valor numeric muestra el día sin ceros a la izquierda. El valor 2-digit muestra el día con ceros a la izquierda.

Para días de un solo dígito, numeric produce valores como "5" mientras que 2-digit produce "05".

Combinar múltiples partes de fecha

Puedes especificar múltiples opciones en un solo formateador para mostrar exactamente la combinación que necesitas.

const date = new Date('2024-10-15');

// Solo mes y año
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Solo día de la semana y día
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Solo mes y día
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// Todos los componentes con formato personalizado
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

El formateador organiza automáticamente los componentes según las convenciones del idioma. No necesitas preocuparte por el orden o la puntuación.

Cómo funcionan las opciones en diferentes idiomas

Las mismas opciones producen resultados diferentes en distintos idiomas. Cada idioma sigue sus propias convenciones para ordenar y formatear las partes de la fecha.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

El alemán coloca primero el día y usa un punto como separador. El japonés utiliza el orden año-mes-día con caracteres japoneses. El árabe utiliza la escritura árabe tanto para el nombre del mes como para los números.

Los nombres de los días de la semana y los meses también cambian según el idioma.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

El francés usa minúsculas tanto para los nombres de los días de la semana como para los meses. El español también usa minúsculas pero incluye una coma como separador.

Casos de uso comunes

Mostrar el mes y el año funciona bien para fechas de publicación y listados de archivos.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

Mostrar los nombres de los días de la semana funciona bien para calendarios y horarios.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

Mostrar el mes y el día sin el año funciona bien para cumpleaños y eventos anuales.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

Resumen

El objeto de opciones Intl.DateTimeFormat te permite mostrar partes específicas de una fecha en lugar de la fecha completa. La opción weekday acepta narrow, short o long. La opción year acepta numeric o 2-digit. La opción month acepta numeric, 2-digit, narrow, short o long. La opción day acepta numeric o 2-digit.

Puedes combinar múltiples opciones para mostrar exactamente las partes que necesitas. El formateador maneja automáticamente el orden y la puntuación según la configuración regional. Diferentes configuraciones regionales utilizan diferentes convenciones para mostrar los mismos componentes de fecha.