¿Cómo muestro 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. Puede 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 "full" o "short", especificas exactamente qué partes incluir y cómo formatear cada una.

Comprender 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 es. El month muestra qué mes del año es. El day muestra qué día del mes es.

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 reducido en algunos idiomas. Por ejemplo, martes y jueves comienzan con "M" en español.

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 dos últimos 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 reducido en algunas configuraciones regionales. Por ejemplo, marzo y mayo 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');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
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 de la configuración regional. No necesitas preocuparte por el orden o la puntuación.

Cómo funcionan las opciones en diferentes configuraciones regionales

Las mismas opciones producen diferentes resultados en diferentes configuraciones regionales. Cada configuración regional 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 el día primero y usa un punto como separador. El japonés usa el orden año-mes-día con caracteres japoneses. El árabe usa 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 la configuración regional.

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 utiliza minúsculas tanto para los nombres de los días de la semana como para los meses. El español también utiliza minúsculas pero incluye un separador de coma.

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.