Cómo formatear fechas para diferentes configuraciones regionales en TanStack Start v1

Problema

Las fechas no tienen un formato de visualización universal. La secuencia 10/12/2025 significa 10 de octubre en Estados Unidos pero 10 de diciembre en el Reino Unido. Escribir "Oct 12, 2025" asume nombres de meses en inglés y una convención de ordenamiento específica. Cada región tiene sus propias expectativas para el formato de fecha, incluyendo el orden del día, mes y año, la elección de separadores, y si los nombres de los meses se escriben completos o abreviados. Cuando una aplicación muestra fechas en un único formato fijo, resulta extraño y confuso para los usuarios en la mayoría de las regiones.

Los usuarios esperan que las fechas aparezcan en el formato que aprendieron y usan diariamente. Una fecha que parece natural para una audiencia puede ser ambigua o discordante para otra. Sin un formato adaptado al idioma local, las fechas se convierten en una fuente de fricción que socava la experiencia del usuario y hace que la aplicación parezca menos profesional.

Solución

Formatear las fechas basándose en la configuración regional del usuario mediante la conversión de valores de fecha en cadenas que siguen las convenciones regionales para el orden, separadores y nombres de meses. React-intl proporciona funciones de formateo y componentes que utilizan las APIs de internacionalización integradas del navegador para aplicar automáticamente las reglas correctas para cada configuración regional. Al pasar un valor de fecha y opciones de formateo opcionales a estas herramientas, la aplicación produce una salida que es clara y natural para el idioma y región del usuario.

Este enfoque asegura que las fechas se muestren correctamente sin tener que implementar manualmente la lógica de formateo para cada configuración regional. El formateo se adapta a la configuración regional del usuario, haciendo que las fechas sean inmediatamente reconocibles y reduciendo la carga cognitiva.

Pasos

1. Crear un componente que formatee fechas con el hook useIntl

Utiliza el hook useIntl para acceder al método formatDate, que convierte un valor de fecha en una cadena adaptada al idioma local.

import { useIntl } from "react-intl";

export function EventDate({ date }: { date: Date }) {
  const intl = useIntl();

  return (
    <time dateTime={date.toISOString()}>
      {intl.formatDate(date, {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </time>
  );
}

El método formatDate aplica las convenciones del idioma local para mostrar la fecha. El objeto de opciones controla qué partes de la fecha aparecen y su nivel de detalle. La cadena formateada se adapta al idioma proporcionado por el IntlProvider en un nivel superior del árbol de componentes.

2. Formatear fechas con estilos específicos utilizando opciones predefinidas

Pasa diferentes combinaciones de opciones para controlar el estilo de formato de fecha, como fechas numéricas cortas o fechas descriptivas largas.

import { useIntl } from "react-intl";

export function ArticleMetadata({ publishedAt }: { publishedAt: Date }) {
  const intl = useIntl();

  const shortDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  const longDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });

  return (
    <div>
      <p>Published: {shortDate}</p>
      <p>Full date: {longDate}</p>
    </div>
  );
}

La opción month acepta valores como numeric, 2-digit, short, long y narrow. La opción weekday añade el día de la semana. Cada idioma interpreta estas opciones según sus propias convenciones, asegurando que el resultado coincida con las expectativas del usuario.

3. Usar el componente FormattedDate para formateo declarativo

Renderiza fechas de forma declarativa utilizando el componente FormattedDate, que acepta las mismas opciones de formato que el método formatDate.

import { FormattedDate } from "react-intl";

export function OrderSummary({ orderDate }: { orderDate: Date }) {
  return (
    <div>
      <h2>Order placed on</h2>
      <FormattedDate
        value={orderDate}
        year="numeric"
        month="long"
        day="numeric"
      />
    </div>
  );
}

El componente FormattedDate renderiza la fecha formateada como un fragmento de React por defecto. Utiliza el idioma del contexto IntlProvider y aplica las mismas reglas de formato que la API imperativa. Este enfoque funciona bien cuando la fecha formateada es el único contenido necesario en esa parte del árbol de componentes.

4. Formatear fechas con información de hora

Incluye componentes de tiempo añadiendo opciones de hora y minuto para mostrar tanto la fecha como la hora en una sola cadena formateada.

import { useIntl } from "react-intl";

export function AppointmentCard({ scheduledAt }: { scheduledAt: Date }) {
  const intl = useIntl();

  return (
    <div>
      <p>
        Programado para:{" "}
        {intl.formatDate(scheduledAt, {
          year: "numeric",
          month: "short",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

Añadir las opciones hour y minute produce una cadena combinada de fecha y hora. La configuración regional determina si se utiliza el formato de 12 o 24 horas y cómo separar las partes de fecha y hora. Esto mantiene el formato consistente con las expectativas regionales para mostrar marcas de tiempo.